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?
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
You can also control the related video ON/OFF option by using following simple code:
