How To Make Youtube Videos Responsive In Your Blog Posts

How To Make Youtube Videos Responsive In Your Blog Posts

Hello Friends,
in this article we discussed about how to add youtube videos in our blogs.
You might faced some issues when you place videos in blogs, but it's not responsive in all the devices like mobile and tablet.

Image to show you:

Let's fix it using some easy steps,

First of all you have to copy your youtube video ID
Now you have question that How to find video ID?
Don't worry!

Copy youtube video URL,

Look like this : https://www.youtube.com/watch?v=NHCZ-dwx3fo
Here you can see that the end of URL have 11 digit of code
Look like this : NHCZ-dwx3fo

Let's move forward,

Use Below Code:

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

Here You can see that youtube video ID = XXXXXXXXXXX

Replace it with your youtube video ID & you are done.!

For example after adding ID: 

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

Now you can place this code in your blogs, Where you have to place your youtube video.

Thanks you for visiting here see you again, bye bye !!! 
If you like this then share it with your friends and keep supporting!