How to embed the YouTube Video responsively in website?

Nowadays most of the website included the video promotion for their products or services. Most of the people uploaded video in YouTube and embed the videos to their website, but YouTube is not provides embed code for responsive videos, so how they can make video as responsive?
 
youtube responsive video

Embed YouTube video responsive

Today’s all website should be responsive design and supported for all devices such as desktop, tablet and mobile. If your website is not responsive design; than google SEO ranking will be impact, so you must make your website as responsive. Some website is responsive but still they struggle to embed the video as responsive, in this case they can use following example code to integrate their website and make video as responsive.

 

<html>
<head>
<title>Resonsive Video</title><style>
.videoContainer {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
. videoContainer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class=” videoContainer “>
<!—Replace your YouTube embed code here –>
<iframe src=”//www.youtube.com/embed/MN4krVJSGx0?rel=0&showinfo=0&theme=dark” frameborder=”0″ allowfullscreen></iframe>
</div>

</body>
</html>

 

WordPress Responsive video Plugin

If you are using WordPress website, than you can easy to embed YouTube video in your website or blog. Download and install the WordPress Responsive Video light plugin and open your page add the following code where you would like to embed the video

youtube responsive
 

You can also control the related video ON/OFF option by using following simple code:

youtube responsive

 

The following two tabs change content below.

Jey Ganesh

Jey Ganesh is a Blogger of designdug.com, Here you can find all about design tips and tricks. You can also engage with designdug via email: admin@designdug.com

Jey Ganesh

Jey Ganesh is a Blogger of designdug.com, Here you can find all about design tips and tricks. You can also engage with designdug via email: admin@designdug.com

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *