: How to make Youtube Video responsive? I am creating a video site and want to make video responsive. I had created a class .video { float: left; width: 90% !important; margin-top:

Posted in: #ResponsiveWebdesign #VideoSitemap #Youtube

I am creating a video site and want to make video responsive. I had created a class

.video {
float: left;
width: 90% !important;
margin-top: 1%;
margin-bottom: 1%;
margin-right: 5%;
margin-left: 5%;
border: 0px solid #FFF ;
height: 550px !important;
box-shadow: 1px 1px 3px #555 ;

and had gives to youtube video code i.e. Iframe code as per following

<iframe src="https://www.youtube.com/embed/MRk5HynHe44" frameborder="0" class="video" allowfullscreen></iframe>

Tell me if any thing missing or any other tricks to make this video more responsive.

10.01% popularity Vote Up Vote Down

: Does a Creative Commons "Attribution-NonCommercial 3.0 Unported License" classify a nonprofit as a "commercial entity"? If something this license applies to is used by a nonprofit, is the nonprofit

@Jessie594

Posted in: #CreativeCommons #Legal #Licenses

1 Comments

: SSL issue with firefox My website is hosted on hostgator and i have purchased their ssl service. Now when i open my website in chrome then it works fine but when i open it in firefox

@Jessie594

Posted in: #Firefox #Https #Security #SecurityCertificate

1 Comments

: Which is better for SEO: icon-based linking or text-based linking? I am wondering is it better to use icon-based links rather than text-based ones for SEO? For example have the link to your

@Jessie594

Posted in: #Icon #Links #Seo #Sitelinks

4 Comments

: What should be length of keyword using for meta keyword tag? I want to know that what is character count limit to use Meta Keyword as per Search Engine Optimization policy like Title should

@Jessie594

Posted in: #Keywords #MetaKeywords #MetaTags

1 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Eichhorn148

I enclose the video iframe in a div.

<div class=youtube-container>
<iframe src="https://www.youtube.com/embed/MRk5HynHe44" frameborder="0" allowfullscreen></iframe>
</div>

I use some CSS to make that div responsive such that it is wide as it can be, and always maintains the 16:9 aspect ratio. Then I use CSS to make the YouTube iFrame take up the whole container:

.youtube-container {
width: 100%;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

.youtube-container iframe,.youtube-container object,.youtube-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

10% popularity Vote Up Vote Down

Feed

: How to make Youtube Video responsive? I am creating a video site and want to make video responsive. I had created a class .video { float: left; width: 90% !important; margin-top:

More posts by @Jessie594

: Does a Creative Commons "Attribution-NonCommercial 3.0 Unported License" classify a nonprofit as a "commercial entity"? If something this license applies to is used by a nonprofit, is the nonprofit

: SSL issue with firefox My website is hosted on hostgator and i have purchased their ssl service. Now when i open my website in chrome then it works fine but when i open it in firefox

: Which is better for SEO: icon-based linking or text-based linking? I am wondering is it better to use icon-based links rather than text-based ones for SEO? For example have the link to your

: What should be length of keyword using for meta keyword tag? I want to know that what is character count limit to use Meta Keyword as per Search Engine Optimization policy like Title should

Login to post a comment!

1 Comments

Back to top | Use Dark Theme