Creating a video banner on your website consists of two things:

  1. A 10 second muted mp4 video to play in a loop in the background of the banner.

  2. A watch button that opens a modal to play the full-length video on Youtube or Vimeo.


In this article,

Creating a video banner using a Youtube video

Creating a video banner using a Vimeo video


Creating a Video Banner Using Youtube

  1. The first step in creating a video banner is to copy the code snippet below.

<div class="video-overlay">
<div class="bg-video"><video id="myVideo" width="300" height="150" autoplay="autoplay" muted="" loop="loop"><source src="https://cdn.givecloud.co/s/files/1/0000/0588/files/pexels-videos-1856931.mp4" type="video/mp4" /></video></div>
<div class="overlay">
<section class="container">
<div class="row">
<div class="col-md-8 offset-md-2 content-box text-center">
<h2><span style="color: #ffffff; font-size: 36pt;">Heading goes here</span></h2>
<h4>Subtext goes here<br /><br /></h4>
<a class="btn btn-lg btn-primary video1-modal m-2 wow fadeInLeft" href="#" target="_blank" rel="noopener" data-wow-delay="0.1s" data-video-id="GEbQVdX-YZM">Watch&nbsp;<em class="fa fa-play"><!-- --></em></a></div>
</div>
</section>
</div>
</div>
<div>

2. Head to Features > Website > Pages & Menus and open the page you would like to create the video banner on.

3. Click into the code tab.

4. Paste the code snippet at the top.

5. Click the "Add Media" button and upload your 10 second muted mp4 clip.

6. Click the magnifying glass icon to open the mp4 video in a new tab

7. Copy the URL of the video.

8. Go back to the other tab where you have the page open and click back into the code tab.

9. In the line of the code that says

<div class="bg-video"><video id="myVideo" width="300" height="150" autoplay="autoplay" muted="" loop="loop"><source src="https://cdn.givecloud.co/s/files/1/0000/0588/files/pexels-videos-1856931.mp4" type="video/mp4" /></video></div>

Replace the url after src= to be that of the URL of your mp4 video. This will update the background video for you.

10. Then to link the "Watch" button to a Youtube Video, grab the Youtube Video ID from the end of the URL of the video on Youtube

11. In the line of code that says

<a class="btn btn-lg btn-primary video1-modal m-2 wow fadeInLeft" href="#" target="_blank" rel="noopener" data-wow-delay="0.1s" data-video-id="GEbQVdX-YZM">Watch&nbsp;<em class="fa fa-play"><!-- --></em></a></div>

Replace the bit that says "GEbQVdX-YZM" with your new Video ID.


Creating a Video Banner Using Vimeo

The first step in creating a video banner is to copy the code snippet below.

<div class="video-overlay">
<div class="bg-video"><video id="myVideo" width="300" height="150" autoplay="autoplay" muted="" loop="loop"><source src="https://cdn.givecloud.co/s/files/1/0000/0588/files/pexels-videos-1856931.mp4" type="video/mp4" /></video></div>
<div class="overlay">
<section class="container">
<div class="row">
<div class="col-md-8 offset-md-2 content-box text-center">
<h2><span style="color: #ffffff; font-size: 36pt;">Heading Goes Here</span></h2>
<h4>Subtext goes here<br /><br /></h4>
<a class="btn btn-lg btn-primary video1-modal m-2 wow fadeInLeft" href="#" target="_blank" rel="noopener" data-wow-delay="0.4s" data-channel="vimeo" data-video-id="TF3QI8wIcSo">Watch&nbsp;<em class="fa fa-play"><!-- --></em></a></div>
</div>
</section>
</div>
</div>
</div>

2. Head to Features > Website > Pages & Menus and open the page you would like to create the video banner on.

3. Click into the code tab.

4. Paste the code snippet at the top.

5. Click the "Add Media" button and upload your 10 second muted mp4 clip.

6. Click the magnifying glass icon to open the mp4 video in a new tab

7. Copy the URL of the video.

8. Go back to the other tab where you have the page open and click back into the code tab.

9. In the line of the code that says

<div class="bg-video"><video id="myVideo" width="300" height="150" autoplay="autoplay" muted="" loop="loop"><source src="https://cdn.givecloud.co/s/files/1/0000/0588/files/pexels-videos-1856931.mp4" type="video/mp4" /></video></div>

Replace the url after src= to be that of the URL of your mp4 video. This will update the background video for you.

10. Then to link the "Watch" button to a Vimeo Video, grab the Vimeo Video ID from the end of the URL of the video on Vimeo

11. In the line of code that says

<a class="btn btn-lg btn-primary video1-modal m-2 wow fadeInLeft" href="#" target="_blank" rel="noopener" data-wow-delay="0.4s" data-channel="vimeo" data-video-id="TF3QI8wIcSo">Watch&nbsp;<em class="fa fa-play"><!-- --></em></a></div>

Replace the bit that says "TF3QI8wIcSo" with your new Video ID.


Did this answer your question?