Translate to Tamil

Earn Money


Best Offers

Amazon Best Offers

Offers

Online Income

Best Online Offers

Amazon Offers

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