Make Embedded Videos Responsive in Blogger - Add Elegant Frames on Video ~ Study By YouTube

Make Embedded Videos Responsive in Blogger - Add Elegant Frames.

Videos are used widely along with text content in blog posts and today's article is all about how to make those embedded videos responsive plus display them inside elegant frames of your choice.

Making videos responsive is the easy task to accomplish but along with that, displaying those videos inside beautiful frames was little tedious for me.

I am going to share different frames where first one is a image frame of blank MacBook so it appears as if video is playing inside it.

So what will you get in this post?

1. Display Video Inside Responsive Frame Made of Pure CSS.
2. Display Video Inside Responsive Image Frame of a Blank MacBook.

Note:-
(You don't have permission to copy and share my code on your blog)

1. Make Embedded Videos Responsive in Blogger - Add Elegant Frames on Video

When you get the code to Embed your video from YouTube or any other video hosting site, your code will contain a fixed height and width properties. So when someone visits your site from small resolution devices like as mobile or a tablet, then your embedded video will not re-size itself according to the screen size.

It will always contain its height and width to the original values despite the screen size. So it will either make a scrolling bar on small screen sizes or else it will hide the video part which is overflowing (If overflow: hidden; property is used for the content wrapper). You can not make them responsive like the way you can do with images.

If the scrolling bar is appearing then that particular page will also show an error in your webmaster tools account if you will check it for responsive design (Bad for SEO?).

I wrote that all just because I wanted to to tell you about how important is it to make your embedded videos responsive.

So How You do it?

It is simple enough to do with the help of CSS. So follow the steps given below and be responsive. :D

CSS Part.

<style>
.tb_outer_wrap {
width: 100%;
max-width: 650px;
margin: 15px auto;
}
.tb_video_wrap_macbook {
position: relative;
padding-bottom: 43%;
padding-top: 0;
height: 0;
overflow: hidden;
-webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrGEgg5R3uxMg8lMhJBpWwW32q8Uz-pnHxKFnp-SiiIOiCdE9w2H_T1xlkFKsaDt3ll5fA3sGltCuSsDAGqeyTwxwus3qUEe_6O0JXjWcf0rZX5cEwbm0VpJqGkOGiBsSxmAhkulgv8g/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrGEgg5R3uxMg8lMhJBpWwW32q8Uz-pnHxKFnp-SiiIOiCdE9w2H_T1xlkFKsaDt3ll5fA3sGltCuSsDAGqeyTwxwus3qUEe_6O0JXjWcf0rZX5cEwbm0VpJqGkOGiBsSxmAhkulgv8g/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrGEgg5R3uxMg8lMhJBpWwW32q8Uz-pnHxKFnp-SiiIOiCdE9w2H_T1xlkFKsaDt3ll5fA3sGltCuSsDAGqeyTwxwus3qUEe_6O0JXjWcf0rZX5cEwbm0VpJqGkOGiBsSxmAhkulgv8g/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrGEgg5R3uxMg8lMhJBpWwW32q8Uz-pnHxKFnp-SiiIOiCdE9w2H_T1xlkFKsaDt3ll5fA3sGltCuSsDAGqeyTwxwus3qUEe_6O0JXjWcf0rZX5cEwbm0VpJqGkOGiBsSxmAhkulgv8g/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
border-color: rgba(0, 0, 0, 0);
border-width: 27px 76px 55px 76px;
border-style: inset;
}
.tb_video_wrap_macbook iframe, .tb_video_wrap_macbook object, .tb_video_wrap_macbook embed {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #ddd;
}
@media (max-width: 500px) {
.tb_video_wrap_macbook {
border-width: 20px 62px 40px 62px;
}
@media all and (max-width: 400px) {
.tb_video_wrap_macbook {
border: none !important;
}
}
</style>

HTML Code

<div class="tb_outer_wrap">
<div class="tb_video_wrap_macbook">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU?rel=0&theme=dark&controls=1&showinfo=0&autohide=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>

How To Use It.

CSS:-

Copy the above CSS Part first then switch to HTML Mode of your blogger post editor and paste the the whole CSS code as it is (Will work for WordPress too).

Note:-
You can also paste the CSS code inside your blogger template skin so that you don't have to paste the CSS code every time in any of your blogger post. If you want to paste the code inside your template then copy the CSS code without the <style> tag and paste it just before ]]></b:skin> and save your template.

HTML:-

Copy the HTML code and Paste inside your post editor after switching to HTML mode. You have to paste the HTML where you want your video to be appeared in your content. Now for adding your video, just replace the code highlighted in yellow color with the embed code you got from your YouTube or Vimeo video.

Note:-
To get the embed code for your video on YouTube, just right click on the video player and select Get embed code. You will get your code in the middle of your video screen so copy it from there.

If you followed all the steps correctly then you will have your video which is fully responsive. You can check it live by re-sizing your browser window easily.

Now I am going to share those two other ways along with live demo for adding cool frames and the process of using the code will be same as explained above so I am not going to re-write it again (except few changes).

Editing Steps:-
Replace the highlighted part with your video ID for YouTube and for Vimeo videos, just replace the full <iframe> code.

So this is it for now and I hope you guys like it. Please let me know your feedback via comments whether your liked it or not.

If you're facing any kind of problem or I could not make things clear then please let me know. I will try my best to help you out.

You can help me too by sharing this post or connecting with me on social networks. :D

Thanks and stay blessed!

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.