Tuesday Blog Tips: Responsive Videos


Yesterday, I talked about Hour of Code, so for today's Tuesday Blog Tips, I thought would stay on the topic of codes and share some useful code that I think all blogs need to have! This code will help you
to make videos you may embed in your blog, responsive. If something is responsive, it means it will automatically adjust to the size of a mobile device.

So instead of this:




You'll get this:



Which definitely looks better! And it's really easy to do, using two different types of code. The first type is a CSS code. Underneath the Layout menu in Blogger, click on Template Designer. Then go to Advanced, click on add CSS, and copy and paste the following code:

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

It will look like this:


What this piece of code will do is automatically resize any embedded video, to best fit any mobile device. However, you'll notice in the CSS, the word container. It's basically saying,the video that's in this container needs to be resized! This is why you need the second piece of code, some HTML! When you've embedded a video, you need to put it inside a container, otherwise, if you embed the video as it is then the CSS won't resize it. It sounds complicated but it's really simple! 

This is what a video container looks like:

<div class="video-container">

</div>  

When you embedded a video into your blog, for example a YouTube video, you will get a code that looks like this:


So what you want to do after you've copied the code, is wrap the container around it like this: 


What this piece of code does is let the CSS code know that it needs to be resized. The CSS needs to be told what to resize and the container makes it easy for the CSS to find it in order to do so. 

So to recap, add this piece of CSS in your Template Designer:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 (Once you've saved it, you don't need to touch it again). 

Next, whenever you embed a video, add this HTML before and after the video code. 

<div class="video-container">

</div>

(Note that you will have to do this for every video you embed). 

So there you have it! Responsive videos on any mobile device! 

For more blog tips: click here! And as usual, there will be more tips next Tuesday!

Thanks for reading! 
♡ Katya