There is a trend of adding a video element looping as the background of the website. Do you want to do this too? You won’t believe how easy it is to do. All you need to do is get a video and/or audio you want to loop in the background of your page and the rest is history.
I will show you how you can add HTML5 video and audio elements to your page with these simple steps.
1. Add the ‘video’ and ‘audio’ tag inside the body of your HTML.
<body> <video id="back_video" src="video source goes here" loop></video> <audio id="bark_audio" src="audio source goes here" loop></audio> ... </body>
2. Add css style to the video element to extend the size of the browser window.
#back_video{
width: 100%;
z-index: 0; /*puts video behind all the elements on the page.*/
}
#bark_audio{
visibility: hidden;
}
3. Add interaction with JavaScript, so when the page loads the video plays in the background and loops automatically and if the user clicks the video the audio file gets played in response to the click event.
<script>
var doc = document;
var video = doc.getElementById("back_video");
var audio = doc.getElementById("bark_audio");
doc.addEventListener("DOMContentLoaded", function() {
playBackgroundVideo();
video.addEventListener("click", playDogBark);
});
function playBackgroundVideo(){video.play();}
function playDogBark(){audio.play();}
</script>