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.


<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%;
<div class=” videoContainer “>
<!—Replace your YouTube embed code here –>
<iframe src=”//” frameborder=”0″ allowfullscreen></iframe>



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, Here you can find web technologies information and online tips. You can also engage via email:

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.