"VideoJs Responsive"
Bootstrap 4.1.1 Snippet by mdwaris198

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" /> <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <video id="my-video" class="video-js vjs-default-skin vjs-16-9 vjs-16-9 vjs-big-play-centered" controls preload="auto" poster="https://statusheart.com/media-file/2020/01/Sau-Galtiyan-WhatsApp-status-Download-Video-Status-367x206.jpg" data-setup="{}" > <source src="https://statusheart.com/media-file/2020/01/Sau-galtiyan-WhatsApp-status-video-status-wala-baba.mp4" type="video/mp4" /> <source src="https://statusheart.com/media-file/2020/01/Sau-galtiyan-WhatsApp-status-video-status-wala-baba.mp4" type="video/webm" /> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank" >supports HTML5 video</a > </p> </video> </div> <div class="col-md-3"></div> </div> </div> <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>

Related: See More


Questions / Comments: