The Video Wrapper tool is meant for inserting iframe-based videos, such as ones from YouTube or Vimeo. If you wish to insert an HTML5 video that resides on you server, please use the HTML5 Video tool.
We'll provide examples for the two most popular video servers: YouTube and Vimeo
On a computer, open YouTube in a browser, then load the video you want to use.
Click the Share Link, then the Embed tab.
Copy the iframe code displayed.
On a computer, open Vimeo in a browser, then load the video you want to use.
Click the Share Link, then the Embed tab.
Copy the iframe code displayed.
Note: If you click the link to show further options, do not select the Responsive option. If you do, the embed code will contain a video wrapper around the iframe. This will not work in our interface and, besides, Vimeo's responsive implementation is inferior to ours.
Right-click on your page where you want the Calendar to appear and choose PVII HTML Toolkit > Video Iframe Wrapper...
The UI will open.
Paste the iframe you copied from Google into the Embed Code box.
Set Styling options and a User Class (if you'd like).
Click OK.
A responsive video will appear in your page when the page is viewed in a browser.
YouTube Tip: If you want to disable the related videos overlay that appears when a YouTube video ends, you can add a parameter to the URL in the embed code. The default YouTube embed code will look something like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/jEjUAnPc2VA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
The URL is this part:
src="https://www.youtube.com/embed/jEjUAnPc2VA"
In the Embed Code box in our interface, add the following parameter just inside the closing quote:
?rel=0
The URL will now look like this:
src="https://www.youtube.com/embed/jEjUAnPc2VA?rel=0"
The aspect ratio of a video is calculated by dividing its natural height by its natural width. The resulting ratio, in decimal format is used to set top padding on the wrapper. The height and width of your video will be found in the embed code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/jEjUAnPc2VA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Divide the height by the width to get the ratio. 315 / 560 = .5625
This ratio is used to assign top padding to the wrapper. By default, we use .5625, which translates to 56.25%. If your video has a different aspect ratio, calculate it and use the result to edit the padding-top value in the p7TKGADGETS-01.css file on line 18.