This page contains instructions on how to enable a video to:
- Popup in page to max screen size (depending on device)
- Loop automatically
- NOT show related videos
There are 2 “codey” things we need to do to make this work:
- We need to add some code to your JS file
- 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
Update Script in JS file
- Download Script
- Identify your JS file – this is normally in the following subdirectory /wp-content/themes/yourthemename/js/custom.js
- Add this script to the file – see image below
Update CSS in CSS file
- Download Script
- Identify your CSS file – this is normally in the following subdirectory /wp-content/themes/yourthemename/style.css
- Add the script to the file – see image below
Finally add your video
- Select the YouTube or Vimeo video that you wish to embed.
- Copy url from YouTube or Vimeo video.
- Design a cover image for the page on which you are going to display the vide (If you decide to have a different one)
- Paste the url and the cover image into your website, and add class =’video’ in the <a href tag
- Click update and preview