Embed YouTube Videos

Add YouTube videos to course/module/topic descriptions

How embeds work

Descriptions support Markdown and a small amount of safe HTML. You can embed YouTube videos by pasting a YouTube </strong> embed. </p> <div class="alert alert-info mb-3"> <strong>Important:</strong> Only YouTube iframes are allowed (from <code>youtube.com</code> or <code>youtube-nocookie.com</code>). Other iframes are removed for security. </div> <div class="alert alert-secondary mb-0"> <strong>Note:</strong> You don't have to add a <code><div markdown="0"></code> wrapper. BlitzGrok preserves valid YouTube embed iframes automatically. </div> </div> </div>  <div class="mb-5"> <h4 class="mb-4">Step-by-Step</h4>  <div class="card border-0 shadow-sm mb-4"> <div class="card-header bg-transparent border-bottom py-3"> <h5 class="mb-0"> <span class="badge bg-primary me-2">1</span> Open the description editor </h5> </div> <div class="card-body p-4"> <p class="mb-4"> Go to the item you want to update (course, module, or topic) and open its edit form. Find the <strong>Description</strong> field. </p> <div class="row g-3"> <div class="col-md-6"> <figure class="mb-0 zoomable-screenshot-container"> <img src="/static/help/images/60_embed_youtube_video/00_topic_edit_form.png" class="img-fluid border rounded zoomable-screenshot" alt="Topic edit form showing description" loading="lazy" style="cursor: zoom-in;" data-bs-toggle="modal" data-bs-target="#screenshotZoomModal" data-screenshot-src="/static/help/images/60_embed_youtube_video/00_topic_edit_form.png" data-screenshot-alt="Topic edit form showing description" > <figcaption class="text-muted small mt-2">Open the edit form and locate the description</figcaption> </figure> <script> if (!window.screenshotZoomInitialized) { window.screenshotZoomInitialized = true; document.addEventListener('DOMContentLoaded', function() { // Create modal HTML if it doesn't exist if (!document.getElementById('screenshotZoomModal')) { const modalHTML = ` <div class="modal fade" id="screenshotZoomModal" tabindex="-1" aria-labelledby="screenshotZoomModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-xl"> <div class="modal-content bg-dark"> <div class="modal-header border-0 pb-0"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body text-center p-4"> <img id="screenshotZoomImage" src="" alt="" class="img-fluid" style="max-height: 80vh;"> </div> </div> </div> </div> `; document.body.insertAdjacentHTML('beforeend', modalHTML); } // Set up event listener for modal const modal = document.getElementById('screenshotZoomModal'); if (modal) { modal.addEventListener('show.bs.modal', function(event) { const button = event.relatedTarget; const src = button.getAttribute('data-screenshot-src'); const alt = button.getAttribute('data-screenshot-alt'); const modalImage = document.getElementById('screenshotZoomImage'); modalImage.src = src; modalImage.alt = alt; }); // Change cursor back when modal is shown modal.addEventListener('shown.bs.modal', function() { const img = document.getElementById('screenshotZoomImage'); if (img) { img.style.cursor = 'zoom-out'; img.onclick = function() { bootstrap.Modal.getInstance(modal).hide(); }; } }); } }); } </script> <style> .zoomable-screenshot { transition: transform 0.2s ease, box-shadow 0.2s ease; } .zoomable-screenshot:hover { transform: scale(1.02); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } #screenshotZoomModal .modal-dialog { max-width: 95vw; } #screenshotZoomModal .modal-content { background-color: rgba(0, 0, 0, 0.95) !important; } #screenshotZoomImage { cursor: zoom-out; } </style> </div> </div> </div> </div>  <div class="card border-0 shadow-sm mb-4"> <div class="card-header bg-transparent border-bottom py-3"> <h5 class="mb-0"> <span class="badge bg-info me-2">2</span> Paste the YouTube embed iframe </h5> </div> <div class="card-body p-4"> <p class="mb-3"> In YouTube, click <strong>Share</strong> → <strong>Embed</strong>, then copy the iframe code. Paste it into the description. </p> <div class="card border-0 bg-light mb-4"> <div class="card-body p-4"> <h6 class="mb-2">Example</h6> <code><iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video" frameborder="0" allowfullscreen>

Optional: if you ever see Markdown formatting interfere, wrap the iframe in

...

Paste the iframe embed into the description

Make sure the URL is an embed URL. It should look like https://www.youtube.com/embed/..., not watch?v=....

3 Save and verify

Save your changes, then open the page to confirm the video renders inside the description.

After saving, the video appears in the description

Troubleshooting

Video doesn't show: ensure the iframe src is youtube.com/embed or youtube-nocookie.com/embed.

Other embeds removed: BlitzGrok strips non-YouTube iframes for security.

Markdown formatting breaks the iframe: wrap the iframe in ... (usually not needed).

Questions about embedding videos?

We're here to help

Contact Us

Educator Guide Diagram Integration