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
Vimeo Videos / Local 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 -
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://khaalipaper.com/video/dummy1.mp4" allowfullscreen></iframe>
</div>
Video within modals
video
video
video
Video carousel
Video background

Page Ttile Video


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.

Full page video carousel
Video with autoplay option
You can use webm ogv mp4 video formats within your HTML file. Autoplay in Google Chrome If you want use video with autoplay option in Chrome you need to add muted in video tag because Google Chrome is blocking autoplay video with sound (either If even you don't have a sound).

Stop video playing when Bootstrap modal is closed. Play multiple videos in Bootstrap modal on a single page

Autoplay videos after a modal opens