On this page
Video options
The Video Element allows you to add a video to your page within various blocks. Currently, there are 7 video services supported:
Wistia
Vimeo
YouTube
Facebook
Dailymotion
SproutVideo
Shopify Video ( .mp4 video only)
You can enter either a direct video URL or an embed code.
If an embed code is used, you can add extra video player parameters to your video through the embed code such as auto-play, loop, etc. Here is the information from YouTube for example about what player parameters they allow for their embed codes: https://developers.google.com/youtube/player_parameters
*Note: For Shopify Video, only a URL can be used. Copy your Shopify Video URL from the Settings > Files section of your Shopify admin.
The video will be resized automatically based on the available video area size for the block being used. The only exception is the "Video" block which allows you to select different sizes among a list of pre-set options from Small to Full-width.
You can also select between four different video aspect ratios:
1:1 (square)
2:3 (vertical)
4:3 (classic TV)
16:9 (landscape)
In addition to Shape and Border options available in the sidebar of the builder:
Just paste the video URL or embed code into the appropriate field and click the Save button.
Note: You'll get an error message if an incorrectly entered URL/embed code is added or if you are attempting to add a video from an unsupported service.
Adding Video Player Parameters to a YouTube Video
Here is the information from YouTube about what player parameters they allow for their embed codes: https://developers.google.com/youtube/player_parameters
In order to get the video to auto-play and loop once it has finished playing, you've got to set up auto-play and loop through the video's embed code that you use.
The example below will add auto-play, mute, and loop parameters as well as disable related videos.
Notes:
Due to automatic browser settings, a video cannot auto-play if the volume is on. The video will need to be muted if you want it to auto-play.
You will not be able to disable related videos. Instead, if the
rel
parameter is set to0
, related videos will come from the same channel as the video that was just played.
Follow the steps below to modify the embed code:
1. You will only need to modify a small part of the code YouTube gives you. Here is an example you can use, you just need to swap out Yt4MxG5zjB0 with your video's ID:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Yt4MxG5zjB0?rel=0;&autoplay=1&mute=1&loop=1&playlist=Yt4MxG5zjB0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
2. Change the alphanumeric code that appears between embed/ and ?rel=0. In this case, the code to replace is Yt4MxG5zjB0. (The next step tells you what to replace it with.)
3. Grab your video's code from your Youtube Video. Click on the Share button for the video, and then choose the Embed Code option to get the embed share code.
You can copy your video's alphanumeric code directly from the embed code as seen in the screenshot above. Then paste it into the example below in the two locations that INSERTCODE is listed:
<iframe width="560" height="315" src="https://www.youtube.com/embed/INSERTCODE?rel=0;&autoplay=1&mute=1&loop=1&playlist=INSERTCODE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
4. Once complete, copy your modified embed code and paste it into the Video element in Zipify Pages. Then click the Save button:
Notes about Video Auto-Play on Web Browsers*
Over the last few years, all major browser vendors have taken steps to aggressively block autoplaying videos on webpages. Safari announced some policy changes in June 2017 and Chrome followed suit shortly after and Firefox after that.
In summary: all these browsers will aggressively block videos from autoplaying on web pages. Each browser has slightly different rules around how it makes this decision. It’s a huge black box and browsers will not tell you what their exact rules are. The default behavior is to block most autoplay attempts.
There are however some conditions that make it more likely for autoplay to work:
Your video is muted with the muted attribute.
The user has interacted with the page with a click or a tap.
(Chrome - desktop) The user’s Media Engagement Index threshold has been crossed. Chrome keeps track of how often a user consumes media on a site and if a user has played a lot of media on this site then Chrome will probably allow autoplay.
(Chrome - mobile) The user has added the site to their home screen.
(Safari) The device is not in power-saving mode.
These conditions only make autoplay more likely, but remember that aside from these conditions, the user can override the browser’s default setting on a per-domain basis. This basically means that you can never rely on autoplay actually working.
*Source: Mux.com
Full-width Videos ("Video" block only)
To have a video added to the "Video Block" go full-width (edge-to-edge) for the page, follow the steps below:
1. Set the Video Size setting to Full:
2. Set the Video Block's Setting to Full:
3. Add the following CSS code to your page as a Local script to the Header section:
<style>
.zpa-plain-video-003-v3.zpa-block-full-width .xs-12 {
padding: 0;
} </style>
4. Save the script and then Update the page.
Note: The Video will appear full-width on the live/published page only.