Responsive video in HTML5 – Responsive YouTube & Vimeo

Responsive YouTube & Vimeo Videos in HTML5

Use bootstrap class for responsive video

1. .embed-responsive-21by9
2. .embed-responsive-16by9
3. .embed-responsive-4by3
4. .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.