Video Background container

The Video Background container allows you to show a Youtube video in the background. Optional items can be overlaid, like a title, text paragraph and a button, just like with the Hero or Carousel containers. This container is also best to be used as the first element on the page, but this is not mandatory.
video_previewThe container can be seen here on a draft page (first container).

While the image starts to show during the first 1-2 seconds, a custom image will be shown. This image is also used for tablet/mobile view, as the video will not be shown there, its best to use an image taken from the video itself.

FOLLOW THESE STEPS:

1. Create your container

video_01Click on “add new container” on your page, and select the “Video Background” like in the image above.


 

2. Add Title and Text (optional)

video_02In case you want to add a title and a text paragraph, do this on the “title” tab of the container. Otherwise, skip and go to the next tab.


 

3. Add a default image (recommended)

video_03Select the “Default image” tab, and search for the image, if it has already been uploaded to the CMS. You can also add your own image from your computer, selecting “add new image”.


 

4. Add a button with a link (optional)

video_04If there should be also a button over the image, go to the “Link” tab and choose your link. On Link, put in the URL, or if it should link to a page within the same CMS, use the Internal Link Picker. On Description, write the text for the button. On Target you can select whether the link should open in a new window, tab or over the current page.


 

5. Add the Video (mandatory)

video_05Go to your youtube video page, copy the URL of the browser window (starting with https://… ). Back in the CMS, select the Video tab of the container, and paste the youtube URL into the first field. The option Autoplay should be “Yes” for now, and Mute is enabled by default, but in case your video should also play the sound, select “No”.

If you have any questions, please let us know by sending us a ticket to: support@wwfinternational.zendesk.com.