For a better experience, click the Compatibility Mode icon above to turn off Compatibility Mode, which is only for viewing older websites.

Display YouTube & Vimeo Videos in a Lightbox

Displaying videos in a lightbox allows users to easily play a video in fullscreen--and exit--without ever leaving the page. After you've located the iFrame embed code for the YouTube or Vimeo video, follow these directions to edit the code to display the video in a lightbox.

  1. In Sitecore's Content Editor, navigate to the page you want to display the video lightbox on. Click Show Editor above the Body field.



  2. Place the cursor where you would like to display the lightbox and follow the directions to insert an image that will act as the "thumbnail" for the lightbox. It is recommended you use a representative screenshot from the video.

  3. Click HTML in the bottom-left of the content editor window. You will see the image's code:

    <img alt="" width="851" height="477" src="/~/media/Images/galleryV2/basic-editing/mediaEmbed/Screen Shot 20160620 at 91834 AM.ashx" />

  4. Surround the entire image code block with <a class="ilightbox-video" href=""> and </a>. The code should now look like this:

    5. <a class="ilightbox-video" href="">
<img alt="" width="851" height="477" src="/~/media/Images/galleryV2/basic-editing/mediaEmbed/Screen Shot 20160620 at 91834 AM.ashx" />
</a>

  5. In the YouTube or Vimeo iFrame embed code, locate and copy the URL within the src="" tag.

    YouTube

    <iframe width="560" height="315" src="https://www.youtube.com/embed/iB-ubXo7LSs" frameborder="0" allowfullscreen></iframe>

    Vimeo

    <iframe src="https://player.vimeo.com/video/148427236" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/148427236">Drexel Video</a> from <a href="https://vimeo.com/digm">Drexel Digital Media</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

  6. Paste the video's source URL between the quote marks in the lightbox's href="" tag.

    YouTube

    <a class="ilightbox-video" href="https://www.youtube.com/embed/iB-ubXo7LSs">
<img alt="" width="851" height="477" src="/~/media/Images/galleryV2/basic-editing/mediaEmbed/Screen Shot 20160620 at 91834 AM.ashx" />
</a>

    Vimeo

    <a class="ilightbox-video" href="https://https://player.vimeo.com/video/148427236">
<img alt="" width="851" height="477" src="/~/media/Images/galleryV2/basic-editing/mediaEmbed/Screen Shot 20160620 at 91834 AM.ashx" />
</a>

  7. Accept the changes in the Edit HTML window. Save and display or publish the page. The videos will be displayed as a clickable thumbnail, as shown below.