Description: Responsively Embed your YouTube, Dailymotion & Vimeo Videos into your blog using CSS3 & iframe. You can also embed object videos in responsive.
Do you want to embed your YouTube videos responsively in your blog? If yes, welcome to this page. I will use some CSS3 syntax to make any video responsive wrapped with an iframe. Therefore, the same CSS code will also work for your Dailymotion and Vimeo videos to make it responsive on your blog post. Using video in your blog post is always a thumb up vote by your audience but due to the different types of devices you should also consider better user interface of your blog. The best way is to use responsive design, and use everything responsive as possible to deliver better UI of your blog. For example, you can use social share buttons inside blog post responsive and responsive Facebook fan page like box. Therefore, here is a quick guide to responsive embedded YouTube, Dailymotion & Videos.
The preview of the above code is,
You can clearly see the width and height attributes. It cannot be change when display this video on different devices like smartphones and tablets. When the resolution of the device exceed in width for the current video, The iframe will going to overlapped from its post container. Now, just looking forward to solve this issue with CSS3.
Now, go to Blogger dashboard -> select your blog -> Template -> Edit HTML -> click anywhere on the code, press Ctrl + F to find ]]></b:skin>, and paste above CSS code just above ]]></b:skin> code.
Now, here is the HTML code that you have to use for making your embedded video responsive in your blog post as follows.
The preview of above code is,
You may also remove width and height attribute from your embed code prove by YouTube as it has no value. You can also add your Dailymotion and Vimeo videos responsively by the same method. If you have any doubt, you may feel free to ask here via comments.
Embed Responsively YouTube, Vimeo & Dailymotion Videos in Blogs
The following codes can be used for each YouTube, Dailymotion and Vimeo videos. I will explain it by using a YouTube video. Therefore, let's talk about the default iframe code provided by YouTube.<iframe width="420" height="315" src="https://www.youtube.com/embed/CQKrNPRTFbM" frameborder="0" allowfullscreen></iframe>The preview of the above code is,
You can clearly see the width and height attributes. It cannot be change when display this video on different devices like smartphones and tablets. When the resolution of the device exceed in width for the current video, The iframe will going to overlapped from its post container. Now, just looking forward to solve this issue with CSS3.
.bst-responsive-video {
position: relative;
padding-bottom: 56.25%;
height: 0;margin: 20px 0;
overflow: hidden;
}
.bst-responsive-video iframe, .bst-responsive-video object, .bst-responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Technical:
I have created a class '.bst-responsive-video'.
position: relative, so that we can use absolute positioning under this class.
padding-bottom: 56.25%, we have set the height of video player with this padding property here 56.25% shows we are embedding videos for 16:9 aspect ratio. 9/16=.5625, .5625*100=56.25%.
If you want to embed your YouTube videos for 4:3 aspect ratio, you can change padding-bottom with 3/4*100=75%.
height:0, since we have already settled the height using padding-bottom, we don't need to give extra space.
margin: 20px 0, just make a space of 20px from upper and lower from other elements.
overflow: hidden, the things overlapped from the container cannot be shown.
Since we will use this class as a parent class for iframe, we have defined '.bst-responsive-video iframe'. However, you don't need to add '.bst-responsive-video object' and '.bst-responsive-video embed' in the above code, but some of the video hosting sites can give you embedded code with <object> or <embed> than <iframe> so this code will also work to make them responsive. I recommend you to add these codes into your CSS file.
position: absolute, your iframe container will adjust according to its parent container.
left:0;top:0, iframe initial position will be start from top-left corner.
width:100%;height:100%, it will set your width according to your post container, and height will be calculated with its parent container as padding-bottom basis.
I have created a class '.bst-responsive-video'.
position: relative, so that we can use absolute positioning under this class.
padding-bottom: 56.25%, we have set the height of video player with this padding property here 56.25% shows we are embedding videos for 16:9 aspect ratio. 9/16=.5625, .5625*100=56.25%.
If you want to embed your YouTube videos for 4:3 aspect ratio, you can change padding-bottom with 3/4*100=75%.
height:0, since we have already settled the height using padding-bottom, we don't need to give extra space.
margin: 20px 0, just make a space of 20px from upper and lower from other elements.
overflow: hidden, the things overlapped from the container cannot be shown.
Since we will use this class as a parent class for iframe, we have defined '.bst-responsive-video iframe'. However, you don't need to add '.bst-responsive-video object' and '.bst-responsive-video embed' in the above code, but some of the video hosting sites can give you embedded code with <object> or <embed> than <iframe> so this code will also work to make them responsive. I recommend you to add these codes into your CSS file.
position: absolute, your iframe container will adjust according to its parent container.
left:0;top:0, iframe initial position will be start from top-left corner.
width:100%;height:100%, it will set your width according to your post container, and height will be calculated with its parent container as padding-bottom basis.
Now, go to Blogger dashboard -> select your blog -> Template -> Edit HTML -> click anywhere on the code, press Ctrl + F to find ]]></b:skin>, and paste above CSS code just above ]]></b:skin> code.
Now, here is the HTML code that you have to use for making your embedded video responsive in your blog post as follows.
<div class="bst-responsive-video">
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/CQKrNPRTFbM" width="420"></iframe></div>The preview of above code is,
You may also remove width and height attribute from your embed code prove by YouTube as it has no value. You can also add your Dailymotion and Vimeo videos responsively by the same method. If you have any doubt, you may feel free to ask here via comments.
