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

Display Drexel Streams 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 copied the iFrame embed code for the Drexel Streams 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:
  4.   <
      img
       
      width
      =
      "846"
      
      height
      =
      "501"
       
      alt
      =
      "basic drexel streams screenshot"
       
      src
      =
      "/~/media/Images/galleryV2/basic-editing/mediaEmbed/DS_screenshot.ashx"
       
      />
    
  5. Surround the entire image code block with and . The code should now look like this:
          
            <
            a
             
            class
            =
            "ilightbox-video"
             
            href
            =
            ""
            >
          
        
    <
    img
     
    alt
    =
    ""
     
    width
    =
    "851"
     
    height
    =
    "477"
     
    src
    =
    "/~/media/Images/galleryV2/basic-editing/mediaEmbed/DS_screenshot.ashx"
     
    />
    
    
      </
      a
      >