Good day everyone,

I assume you already know how to add an full width video in a webpage using simple HTML and CSS. In this tutorial I’ll show you how you can add 2 videos in one section.

So, how does it work?

When user visit to that specific section of they will see the first video. This video will be our video along with some text over it and the video will be autoplaying.
But in some browsers(i.e.Google Chrome) the autoplay and loop attribute may not work.

<video id="company-video" autoplay loop muted>
    ....
</video>

We can use JavaScript to fix this but in HTML we can fix it by adding another attribute, that is muted.

Now, lets get into a litte deeper. After setting up our first video the code will be very similar to following. I’ve added some BootStrap class for my own use, you can skip it and add your own styles.

<div class="video-parent" aria-hidden="false">
     <video id="company-video" autoplay loop muted>
         <source src="videos/demo.mp4" type="video/mp4">
     </video>
     <h3 class="video-title text-center text-white d-none d-md-block">
          This is our Demo Video
     </h3>
     <img src="/images/playbutton.png" alt="" class="img-fluid" id="play-button" onclick="videoPlay()">
</div>

The css for this section will be:

.video-parent {
    position: relative;
}
video {
    width: 100%;
    margin-bottom: -8px;
}
.video-title {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

The result will be like following with video playing in background.
So, we have nicely added our first video. Now lets another video which will be played when user click on play button image. In our HTML we have already added a JavaScript function for this in img tags. We have 

<img src="/images/playbutton.png" alt="" class="img-fluid" id="play-button" onclick="videoPlay()">

added videoPlay() function as onclick.

Now, lets add the similar HTML and CSS.

<div class="video-parent-original" aria-hidden="true">
     <video id="company-video-original">
        <source src="vide/original-video.mp4" type="video/mp4">
     </video>
     <img src="images/close-video.png" alt="" class="img-fluid" id="close-button" onclick="videoActivity()">
</div>

Now add the following CSS.

.video-parent-original {
    position: relative;
}

[aria-hidden="true"] {
    visibility: hidden;
}
/* code for placing the close icon at top left position of the video */
#close-button {
    position: absolute;
    top: 20px;
    right: 0;
    transform: translate(-50%, -50%);
    width: 28px;
}

From the CSS you can assume that this section will be automatically hidden because of aria-hidden=”true” attribute and its CSS.
So, now we just need to hide the first video when users click on play button and show the second video.

For this we will use our videoPlay() function. The function will be like following

<script>
      var video = document.getElementById("company-video-original");
      var videodemo = document.getElementById("company-video");
      var button = document.getElementById("play-button"); 

      function videoPlay() {
        $(".video-parent").attr('aria-hidden',true);
        $(".video-parent").css("display","none");
        $(".video-parent-original").attr('aria-hidden',false);
        $(".video-parent-original").css("display","block");
        video.play();  
        videodemo.pause();     
        videodemo.currentTime = 0;         
        $("#company-video-original").attr('loop','true');
      }
</script>

So, you can see here we are adding some attribute and css to hide demo video and also using some attribute and css to display the original video and play it. We also paused the demo video  and sets it time to 0. So, when we are again back to this section the video plays from the beginning. But, if you want to play the demo video from the time you left it then delete the line video.currentTime = 0;

Now, when we click on play button the original video will be played and the result will be like following. 

We are almost done. Now all we need to write some JavaScript code to allow us again playing the demo video.

May be you have already noticed, we added a javascript function in our second video images the code was: 

<img src="images/close-video.png" alt="" class="img-fluid" id="close-button" onclick="videoActivity()">

Now, We need to write code for videoActivity() function. Put the following codes below the videoPlay() function.

function videoActivity() {
    $(".video-parent").attr('aria-hidden',false);
    $(".video-parent").css("display","block");
    $(".video-parent-original").attr('aria-hidden',true);
    $(".video-parent-original").css("display","none");
    video.pause();     
    video.currentTime = 0;   
    videodemo.play();  

You can easily understand it. Everying same as the previous videoPlay() function.

Hope, you guys got it and now you can easily implement it.
Note: As you saw we have used in your JavaScript, so you must include jQuery.

Resources:

https://www.pexels.com/video/cropland-1003935/

https://www.pexels.com/video/seal-on-the-beach-1526909/

** These are free to use video, you can check them from the official website as I attached the video link.


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *