How to add responsive video in html

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

One of the problems that every web designer is finds when creating his responsive web page is the insertion of html5 responsive videos in it. For example, videos of the vimeo, wistia or youtube platforms, which are some of the main video management platforms and worldwide known, usually the code provided by these platforms to share our videos insert defined sizes as they are Fixed default width and height which, when we are developing our responsive website, creates some problems with the element if we are not accustomed to these types of situations. More specifically, by having a responsive container, as it is scaled, the video itself “mounts above” other elements, producing an output of the responsive web flow.

Some platforms such as wistia give us the possibility to insert responsive video embeds through some additional link to which we will need a javascript code to solve it.

Then I will share so much CSS code that we can use for all these platforms and make our videos adapt to the containers in which they will be implemented as well as some plugins and tips for handling them easily and quickly which we will see more at background in another article that I will leave at the end.

Let’s start with how to share a video on YouTube to be able to insert it on our website.

What we will do next can apply to any of the 3 platforms that I just mentioned, moreover, in the coding process we will also add the responsive to an mp4 video so that you notice how easy it is to incorporate it.

Most of the platforms will provide you with a code like the following, I will try to break it down for each of the platforms so that you notice the difference, although practically it is the same except for some small parameters that change but that is only for metrics of each platform.

Youtube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/a5IXuQXiGqM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Wistia:

<script src="//fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div class="wistia_embed wistia_async_j38ihh83m5 seo=false videoFoam=true" style="height:100%;width:100%">&nbsp;</div></div></div>

*The wistia code is practically the same as we do, the difference is that they inject on your website personalized elements with defined styles for a video tag to which your chosen video is loaded.

Vimeo:

<iframe src="https://player.vimeo.com/video/243539979?color=ef0800&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

The next step is to wrap the iframe in a container with a class that we can modify at will. In my case, I will do it with a div tag with the class “videos-responsive”.

To which the code is left as follows:

<div class="videos-responsive">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/a5IXuQXiGqM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

In our CSS code we will handle it as follows:

.videos-responsive { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative } 
.videos-responsive iframe, .videos-responsive object, .videos-responsive embed { height: 100%; left: 0; position: absolute; top: 0; width: 100% } 

With this code it is enough for our responsive videos, isn’t it easy?

Now, as I told you at the beginning, we will modify our final code a bit to incorporate MP4 videos so that they are also responsive.

To achieve this is very simple, what we have to do is practically add “.videos-responsive video” to our CSS keeping us as follows:

.videos-responsive { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative } 
.videos-responsive iframe, .videos-responsive object, .videos-responsive embed, .videos-responsive video { height: 100%; left: 0; position: absolute; top: 0; width: 100% } 

I hope this code is very useful in your projects, I would appreciate sharing this information and signing up for you to receive interesting articles like this.

More to explorer

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.