How To Use Videos In Lightbox

How To Use Videos In Lightbox

11/12/2018

The lightbox we use is called iLightbox and it is compatible with both Youtube and Vimeo videos. You can also have an image on your page that opens into a video in a lightbox when clicked. However, to make them display at the correct size, the correct link must be used in the Video URL Lightbox field. Please continue reading below for information on where this can be done and how to do it properly.

Locations You Can insert Videos In A lightbox

    • Portfolio Posts - Each portfolio post has a Youtube/Vimeo Video URL For Lightbox field in the Fusion Page Options that allows a video to be loaded.
    • Lightbox Element - The Lightbox Element can be added directly in the page builder, through the Fusion Builder Elements list, or through the Element Generator in a text editor.
    • Button Element - You can launch a YouTube or Vimeo video in a Lighbox through the Button Element.
    • Add Media To Page/Post - Any image inserted onto a page can open in a lightbox to play a video or show another image.

    How To Insert Videos In The Lightbox For Portfolio Posts

    Step 1 - Open the portfolio post you'd like to add a video to, or create a new one.

    Step 2 - In the Fusion Page Options, locate the 'Youtube/Vimeo Video URL for Lightbox' field and paste your video's link URL. For example, https://vimeo.com/63534746.

    Step 3 - Once you're finished making changes, click Save Draft or Publish/Update.

    IMPORTANT NOTE: Make sure to use the link URL ( https://vimeo.com/63534746 ) and not the embed URL ( http://player.vimeo.com/video/63534746 ).
      • Step 1 - Add the Lightbox element to your page through the Fusion Builder.
      • Step 2 - Select "Video" as the Content Type" for your Lightbox element.
      • Step 3 - Now add your Vimeo or YouTube video's full URL in the Video URL text field.
      • Step 4 - Select a thumbnail image which will launch the video when clicked.

      How to Launch a Video through the Button Element

      You can also launch a YouTube or Vimeo video in a Lightbox through the Fusion Builder Button element.

      • Step 1 - Add a button Element to your page/post content and then add the video URL to the Button URL setting.
      • Step 2 - Next, add the"fusion-lightbox-link" class to the Button Element's Custom Class setting field.
      • Step 3 - Now save your settings and update the page. Clicking the button on the frontend will launch your video in the Lightbox

      Step 1 - Open the page or post you'd like to add a video to, or create a new one.

      Step 2 - Click the Add Media button in the upper left area of the page editor, just below the Fusion Builder button.

      Step 3 - Click the Insert from URL link in the left side and paste your video's link URL in the URL field. For example, https://vimeo.com/63534746.

      Step 4 - Once you've inserted the link URL, click the Insert to Post button on the lower right corner.

      Step 5 - After you insert the video, you must add rel="iLightbox" to the link tag. As an example, please refer to the image to the right.

      How To Set Video Size in Fusion Theme Options

      Step 1 - Navigate to the Avada > Theme Options tab.

      Step 2 - Go to the Lightbox tab, and locate the Slideshow Video Width and Height options. Set the width and height of your video by entering a pixel value into the corresponding setting. For example,1280px for the width and 720px for the height.

      Common Issues or Questions

      My Youtube or Vimeo video is too large!

      This issue is because you're using the embed URL instead of the link URL.

      Recent Posts

      Recent Tweets

      For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
      I Accept