Responsive video in HTML5 – Responsive YouTube & Vimeo
Responsive YouTube & Vimeo Videos in HTML5
Use bootstrap class for responsive video
- .embed-responsive-21by9
- .embed-responsive-16by9
- .embed-responsive-4by3
- .embed-responsive-1by1
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W26JgQW7Uss"></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W26JgQW7Uss"></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W26JgQW7Uss"></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W26JgQW7Usso"></iframe>
</div>
YouTube video in iframe
YouTube video in iframe -
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W26JgQW7Uss" allowfullscreen></iframe>
</div>
Vimeo Videos / Local video in iframe
Vimeo Videos / Local video in iframe -
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://smartlearningtutorials.com/video/dummy1.mp4" allowfullscreen></iframe>
</div>
Responsive YouTube & Vimeo Videos
Responsive mega menu, responsive mega menu bootstrap 4, responsive mega menu bootstrap 5.
Stop video playing when Bootstrap modal is closed. Play multiple videos in Bootstrap modal on a single page. Auto play videos after a modal opens.