How to add a video popup from Youtube or Vimeo

This page contains instructions on how to enable a video to:

1. Popup in page to max screen size (depending on device)
2. Loop automatically
3. NOT show related videos 

There are 2 “codey” things we need to do to make this work:

1. We need to add some code to your JS file
2. We also need to update your css file

How to setup your JS code

This code enables the video to be max width, autoplay and prevents related videos when pausing or at the end of the video

See our video

Update Script in JS file

1. Download Script
2. Identify your JS file  – this is normally in the following subdirectory /wp-content/themes/yourthemename/js/custom.js
3. Add this script to the file – see image below

Update CSS in CSS file

1. Download Script
2. Identify your CSS file  – this is normally in the following subdirectory /wp-content/themes/yourthemename/style.css
3. Add the script to the file – see image below

Finally add your video

1. Select the YouTube or Vimeo video that you wish to embed.
2. Copy url from YouTube or Vimeo video.
3. Design a cover image for the page on which you are going to display the vide (If you decide to have a different one)
4. Paste the url and the cover image into your website, and add class =’video’ in the <a href tag
5. Click update and preview