In a previous blog post, we demonstrated how to use and embed autoplay videos on mobile devices such as iOS and Android. Here we will build on the topic of autoplay videos and show you how to use an autoplay video as a background for your website.
Things you will need to get started
- A laptop/desktop with the latest version of either Chrome, Firefox or Safari installed
- A code text editor such as vim or sublime to do edits
- An autoplay video that is about 5-20 seconds in duration, that is available for delivery and embedding
- A screenshot of the autoplay video, if you are using SYNQ, you can simply use the thumbnail image we provide
- A gif image of your video, you can use something like giphy to convert your video into a gif
- Some basic knowledge of how HTML and CSS work
Please note in browsers like Safari on Mac OS Sierra or High Sierra, if autoplay is completely disabled, only the gif image will load. You can do this locally on your machine as in the files you will create save them on your machine and open them via the open file option in your browser.
If you would like to get started right away, simply go to the end of this blog to download all the files to run a working demo on your browser.
Setting up the HTML page
To start, create file and call it ‘sample.html’ or something similar. Then inside of the file, paste the following HTML code:
In the sample HTML that we provide for this tutorial, we have created three sections within the body of the HTML document:
- header - this is the top part of the html page
- section - this any section within the html page that has content
- footer - this is the bottom of the page which usually contains a copyright message as shown in the example
Please note the sample html page is just a demonstration, your page can have a different layout for this to work.
Embedding the video
After you have created the HTML page, the next step will be embedding your video. You will want to have more than one video format available in your embed code and the sound should be muted. If you are using SYNQ, you can call the details API and copy the urls for the mp4 and webm outputs. We will use similar embed code as described in the autoplay videos for mobile blog post:
<video width="300" height="150" loop="loop" muted="" autoplay="autoplay" playsinline="playsinline" poster="https://media.giphy.com/media/26Ff43GwoaAks9XgY/giphy.gif"> <source src="https://multicdn.synq.fm/projects/24/19/2419e41be6e04824a8f5019076bf61fe/derivatives/videos/8c/41/8c4179f509914ee8a1906193db830756/mp4_720/8c4179f509914ee8a1906193db830756_mp4_720.mp4" type="video/mp4"> <source src="https://multicdn.synq.fm/projects/24/19/2419e41be6e04824a8f5019076bf61fe/derivatives/videos/8c/41/8c4179f509914ee8a1906193db830756/webm_720/8c4179f509914ee8a1906193db830756_webm_720.webm" type="video/webm"> </video>
Replace the paths in the above code with your paths to where your gif and video source files exist. The embed code pasted into your sample.html file should look something like this:
Adding the CSS to your HTML page
At this point the page will not look like much, so we will add in a css file to style the page. To do this, create a file using your text editor called main.css, this will hold the layout and style of the page. Once you have created a main.css file, copy this into it:
Then save the file in the same directory as where your HTML file was saved.
Lastly you will need to include the CSS file in your HTML file, the line you will add into the head section of your HTML will look something like this.
<link rel=stylesheet type="text/css" href="main.css">
Here is what your HTML page should look like now:
If you now open your HTML file in your browser it should look something like this:
Adding CSS media queries to your HTML page
We now have a working page which has a video background. For this final part we are going to make our page smart, so that when tablets and mobile devices load your page they can either load the thumbnail of your video or a gif of your video. We recommend loading the thumbnail image since for mobile devices with lower bandwidth your page will perform better.
Media queries allow you to modify elements of your page based on the dimensions you define for the devices that load your page. What we will be doing is defining a background that loads when devices with smaller screen dimensions load the page.
To do this we will create a file called media_queries.css in the file we will put the following:
Once you have pasted in the above code, you will want to modify the line below with the path to your static image file or a gif file:
Once you have modified the line with the path to your static image file or gif file, save the file in the same directory as where you have saved the HTML file and main.css file.
Then, open your HTML file to edit it again to add in the media_queries.css file. Add this line to the head section of your HTML file:
<link rel=stylesheet type="text/css" href="media_queries.css">
Once you have added the css file to your HTML file, your HTML file should look something like this:
Now you have a working html page with an autoplay background video, feel free to modify the sample to your needs or incorporate this into your existing site.
Link to repo with all the necessary files from this tutorial: https://github.com/gsemino/autoplay-video-as-background-for-website
Send us an email if you have any questions or feedback about this tutorial.