shoppersmood

Responsive Video

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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W26JgQW7Usso"></iframe>
  </div>
Video iframe
YouTube Iframe
YouTube Iframe
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/W26JgQW7Uss" allowfullscreen></iframe>
  </div>

  <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
[ . . . ]

Lorem ipsum dolor sit amet


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.


Just do it!
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).

To Play Video in bootstrap modal popup which takes following steps:-

  1. Include the css and js file of bootstrap.
  2. Give the unique id name of modal popup and write javscript for on load show modal popup at to bottom of page.
  3. Copy the enter popup code and paste inside the page bottom just above the js files.
  • Html
  • JavaScript
  • Example
<!-- Video 1 -->
<a data-toggle="modal" data-title="video 1" data-video="http://khaalipaper.com/video/dummy.mp4" href="#video1">
<div class="thumbIcon"><i class="fas fa-video"></i> Video 1</div>
</a>

<!-- Video 2 -->
<a data-toggle="modal" data-title="video 2" data-video="http://khaalipaper.com/video/dummy.mp4" href="#video2">
<div class="thumbIcon"><i class="fas fa-video"></i> Video 2</div>
</a>

<!-- Modal 1 -->
<div class="modal fade" id="video1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Video 1</h4>
          </div>
          <div class="modal-body modalVideo">
            <video id="video-1" controls class="embed-responsive-item">
                <source src="http://khaalipaper.com/video/dummy.mp4" type="video/mp4">
            </video>
          </div>
        </div>
    </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="video2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Video 2</h4>
          </div>
          <div class="modal-body modalVideo">
            <video id="video-2" controls class="">
                <source src="http://khaalipaper.com/video/dummy1.mp4" type="video/mp4">
            </video>
          </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
  // Video 1
  $('#video1').on('shown.bs.modal', function (event) {
    $('#video-1')[0].play();
  });
  $('#video1').on('hidden.bs.modal', function (event) {
    $('#video-1')[0].pause();
  });

  // Video 2
  $('#video2').on('shown.bs.modal', function (event) {
    $('#video-2')[0].play();
  });
  $('#video2').on('hidden.bs.modal', function (event) {
    $('#video-2')[0].pause();
  });
});
</script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>On page load show Modal Popup !</h1>

    <!-- Video 1 -->
    <a data-toggle="modal" data-title="video 1" data-video="http://khaalipaper.com/video/dummy.mp4" href="#video1">
    <div class="thumbIcon"><i class="fas fa-video"></i> Video 1</div>
    </a>

    <!-- Video 2 -->
    <a data-toggle="modal" data-title="video 2" data-video="http://khaalipaper.com/video/dummy.mp4" href="#video2">
    <div class="thumbIcon"><i class="fas fa-video"></i> Video 2</div>
    </a>

    <!-- Modal 1 -->
    <div class="modal fade" id="video1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Video 1</h4>
              </div>
              <div class="modal-body modalVideo">
                <video id="video-1" controls class="embed-responsive-item">
                    <source src="http://khaalipaper.com/video/dummy.mp4" type="video/mp4">
                </video>
              </div>
            </div>
        </div>
    </div>

    <!-- Modal 2 -->
    <div class="modal fade" id="video2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Video 2</h4>
              </div>
              <div class="modal-body modalVideo">
                <video id="video-2" controls class="">
                    <source src="http://khaalipaper.com/video/dummy1.mp4" type="video/mp4">
                </video>
              </div>
            </div>
        </div>
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="http://khaalipaper.com/js/jquery-3.2.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      // Video 1
      $('#video1').on('shown.bs.modal', function (event) {
        $('#video-1')[0].play();
      });
      $('#video1').on('hidden.bs.modal', function (event) {
        $('#video-1')[0].pause();
      });

      // Video 2
      $('#video2').on('shown.bs.modal', function (event) {
        $('#video-2')[0].play();
      });
      $('#video2').on('hidden.bs.modal', function (event) {
        $('#video-2')[0].pause();
      });
    });
    </script>
  </body>
</html>

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

Autoplay videos after a modal opens