Create a video lightbox (Versions 1.8 and earlier)

If you are using the Beaver Builder Theme, it's easy to create a video lightbox in Page Builder that plays videos from sources like Youtube and Vimeo. There are also instructions below for getting it to work with videos stored on Amazon S3.

Prerequisites 

  • The Beaver Builder theme's lightbox functionality must be enabled. Go to Appearance > Customize > Content > Lightbox and make sure it's enabled.
  • You need the URL of the video you want to show.
  • You need the URL of a cover image to display on the page before the lightbox opens (or text, see the tip below).

Create a video lightbox with a link from Youtube or Vimeo

  1. In Page Builder, create an HTML module where you want your video to appear in your layout.
  2. Add the following code to the HTML module. Substitute an ID, your video URL and your cover image URL in the <a> tag.
<a id="ADD-YOUR-ID" href="https://vimeo.com/122546221"><img src="http://example.com/wp-content/uploads/2015/01/video-cover-image.jpg" /></a>

<script type="text/javascript">

jQuery( function(){
    jQuery( '#fl-homepage-video' ).magnificPopup({
        type: 'iframe',
        mainClass: 'mfp-fade',
        fixedContentPos: false
    });
});

</script>
Tip:  If you want to use a text link rather than a cover image, use the following  <a> tag as a model:
<a id="ADD-YOUR-ID" href="https://youtube.com/watch?v=SCFxTu1Fq3s">ADD YOUR TEXT</a>

Create a video lightbox for an Amazon S3 video

These instructions assume that you haven't uploaded your video to Amazon S3 yet but also describe the folder structure and file permissions you need to get the video lightbox to work. Thanks to one of our members for providing this information!

  1. Create a folder on Amazon S3 that ends as a domain name. 
    For example, create a folder with your domain name at the end, such as name.myurl.com.
  2. Under that folder, create another folder with any name.
  3. Upload the video.
  4. Change the permissions of the video file to the following:
    Group: All user 
    Privilege: Read Only
    ACP: None
    The method to change the permissions varies depending on the tool you’re using to access the file on Amazon S3.  This article may be helpful.
  5. In Page Builder, create an HTML module where you want your video to appear in your layout.
  6. Add the following code to the HTML module. Substitute an ID, your video URL, and your cover image URL in the <a> tag. See the previous procedure for an example of how to add the cover image tag or text.
<a id="ADD-YOUR-ID" href="http://name.myurl.com.s3.amazonaws.com/SUBFOLDER-NAME/VIDEO-FILENAME.mp4">ADD TEXT or IMAGE URL</a>

<script type="text/javascript">

jQuery( function(){
    jQuery( '#fl-homepage-video-4' ).magnificPopup({
        type: 'iframe',
        mainClass: 'mfp-fade',
        fixedContentPos: false
    });
});

</script>