All Collections
Zipify Pages - Tutorials & Documentation
Common Page Section Elements
The Video Element [Zipify Pages]
The Video Element [Zipify Pages]

Everything you need to know about using videos on your pages!

Ezra Firestone avatar
Written by Ezra Firestone
Updated over a week ago

Overview

Videos can effectively showcase products or services, provide demonstrations or tutorials, tell brand stories, and convey emotions that are challenging to express through text alone. They enhance user experience by offering a more immersive and interactive experience.

Videos can also boost conversion rates, as they can effectively communicate product features, benefits, and usage scenarios, helping potential customers make informed purchasing decisions.

Additionally, videos can enhance SEO efforts by increasing engagement metrics, improving the time users spend on the site, and attracting more organic traffic.

Sections which contain the Video element can be found in the "Videos" category of the page section library:

A new video element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Video" element:

📝 You can also set a Video as the background of any section via section settings. Only YouTube, Wistia and Vimeo video supported. A video set as the background of a section is set to autoplay automatically. *YouTube video doesn't support autoplay feature on tablet/mobile devices.

Video Options

The Video Element allows you to add a video to your page within various sections. Currently, there are 7 video services supported: 

  • Wistia

  • Vimeo

  • YouTube (*only embed code supported for YouTube Shorts. To get the embed code, right-click on the video and select "<> Copy embed code".)

  • Facebook

  • Dailymotion

  • SproutVideo

  • Shopify Video ( .mp4 / .mov video only)

You can enter either a direct video URL or an embed code into the field available in the "Main" tab the video element's settings located in the sidebar of the builder:

If an embed code is used, you can add extra video player parameters to your video through the embed code such as auto-play, mute, loop, etc. Information regarding that for YouTube videos and which player parameters they allow for their embed codes can be found here: https://developers.google.com/youtube/player_parameters

📝 For Shopify Video, only a URL can be used. Copy your Shopify Video URL from the Content > Files section of your Shopify admin:

Video Settings & Styles

The following Tabs are also available for Video settings in the sidebar of the builder, allowing for further customization of the video's styles:

📝Choose the device type you'd like to edit the image styles on from the "Edit on" section, prior to making changes. All settings are available in Desktop edit mode, while only style edits for Spacing, Size and Visibility are available in Tablet/Mobile modes.

1. In the "Background" tab you can edit the video's:

  • Background Color - Set a background color for the video

  • Background Image (Coming Soon!) - Set a background image for the video
    ​

2. In the "Shape" tab you can edit the videos:

  • Shape - The shape you'd like used for the video

3. In the "Border" tab you can edit the video's:

  • Border Style - None, solid, dotted or dashed

  • Border Size - How thick you want the border to be

  • Border Color - The color you'd like used for the border
    ​

4. In the "Box Shadow" tab you can edit the video's:

  • Color - The color of the shadow

  • X offset - The horizontal distance of the shadow. You can use positive values to push the shadow rightwards and negative values to push it leftwards

  • Y offset - The vertical distance of the shadow. Positive values will push the shadow downwards, while negative values will push it upwards

    📝 X and Y offsets can also be set using the pin in the square to the right of the offset fields. The pin can be dragged to set coordinates.

  • Blur - The blurriness of the shadow. Higher values create a more blurred shadow, while lower values create a sharper shadow

  • Spread - The size of the shadow. Range of allowed values is 0 - 20

5. In the "Spacing" tab you can edit the video's:

  • Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border

  • Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element

6. In the "Size" tab you can edit the video's:

  • Size - The size of the video with available presets of S/M/L/XL or use the slider to make a Custom size instead

  • Max Width - The maximum width that the video can have on the page. Presets of None/S/M/L/XL are provided. You can use the text box to set a Custom size in px as well.

  • Aspect Ratio - The proportional relationship between the width:height of a video. It describes the shape of the video frame. Presets of common aspect ratios are provided 1:1 (square), 2:3 (vertical), 4:3 (classic TV) and 16:9 (landscape)

7. In the "Visibility" tab you can choose which device(s) to show the video on:

  • Show on Desktop

  • Show on Tablet

  • Show on Mobile

Adding Video Player Parameters to a YouTube Video

The information from YouTube about which player parameters they allow for their embed codes can be found here: https://developers.google.com/youtube/player_parameters

In the example below, auto-play, mute, loop and disabling of related videos parameters are added.

  • Due to automatic browser settings, a video can't 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 completely disable related videos. Instead, if the rel parameter is set to 0, 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" section only)

To have a video added to the "Video" section go full-width (edge-to-edge) for the page, follow the steps below:

1. Set the Video Size setting to 100%

2. Set the Video Section's Setting to Full Width

3. Set the Video Max Width setting to None

4. Set Left/Right Padding values of the Video section to 0%. Set these values to 0% on Tablet/Mobile edit modes as well if you want the video to be full-width on all devices.

5. Update/Publish the page to apply the changes to the published page or to publish the page.
​

📝If the Theme Header/Footer is enabled, it may prevent the video from going completely full-width following the steps above. If so, try adding the following CSS code to your page as a Local script to the Header section and then Update your page:

<style> 
.zpa-plain-video-003-v3.zpa-block-full-width .xs-12 {  
padding: 0; 
}
</style>

Check your published page to see if the code worked as intended. The code will only execute once the live/published page is loaded, not within the builder directly:

Did this answer your question?