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
Result:
You can check reduce your browser size
No comments:
Write comments