Translate to Tamil

Best Offers

Bigbasket [CPS] IN

Amazon Best Offers

Amazon Offers

Offers

Online Income

Best Online Offers

Wikipedia

Search results

Sunday, 28 July 2019

Responsive Youtube Embed

Responsive YouTube Embed





First you will need to add the following to your style sheet.

CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

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


Next, edit add some HTML around your embed code.

<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/21X5lGlDOfg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>


Result: 
You can check reduce your browser size

No comments:
Write comments

Infolinks

Services

© 2014