Embed Youtube Responsively

Do you have a Youtube account ?

Do you like to embed the Youtube videos in your in your blog . You will be and you might be using the embed options given by your platform ( Wordpress , Blogger etc ) . You might have noticed the way they look , the embed Youtube option will not be a responsive one that is the video won't looks perfect on your blog that is it won't look good on your mobile and on desktop . Have a look through my blog and the embed videos how can you have such a look .

Here is how you can make your Youtube videos to look responsive .

<style>
.embed {
position: relative;
padding-bottom: 56.25%;
height: 0; overflow: hidden;
max-width: 100%;
}
.embed iframe,
.embed object,
.embed embed
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed'>
<iframe src='https://www.youtube.com/embed/YOUR-VIDEO-ID' frameborder='0' allowfullscreen></iframe>
</div>

How to change the URL of the video :

• For example  take this link from Youtube : " https://www.youtube.com/watch?v=UAI7rL0x1kU " In this link " UAI7rL0x1kU " is the video id just replace this id from your video URL in the place provided for it .

How to add it in blogger.com :

• Add a new these codes in the HTML part of your post where you want the video to be placed in the post .

Have a good embed videos through your blog and enjoy blogging .

Read more :

• How to create a blog
• How to earn money blogging
• Writing an SEO friendly posts