Bootstrap Video Modal not showing with plyr plugin - html

Question

I have a bootstrap modal that shows an html5 video fine; however, the moment I replace html5 video player with plyr plugin, the video does not show in the modal at all ? Any thoughts on this would be appreciated. Please check code below:
HTML CODE:
<!--Modal: Name-->
<div class="modal fade" id="product-video-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
<video id="product-vid-src" class="embed-responsive-item " width="100%" controls crossorigin playsinline >
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
</video>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<span class="mr-4">Spread the word!</span>
<a type="button" class="btn-floating btn-sm btn-fb"><i class="fa fa-facebook"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-sm btn-tw"><i class="fa fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-sm btn-gplus"><i class="fa fa-google-plus"></i></a>
<!--Linkedin-->
<a type="button" class="btn-floating btn-sm btn-ins"><i class="fa fa-linkedin"></i></a>
<button type="button" class="closeBut btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Name-->
The javascript and jquery code are:
<script type="text/javascript">
jQuery(document).ready(function($) {
// snippet for plyr plugin
const player = new Plyr('video', {captions: {active: true}});
window.player = player;
$('#product-video-modal').on('shown.bs.modal', function() {
var product_vid = document.getElementById("product-vid-src");
if (product_vid != null) {
product_vid.pause();
product_vid.currentTime = 0;
}
});
})
</script>
The moment I remove "snippet for plyr plugin" as commented above, the HTML5 plugin works fine and shows on the modal without any issues?
Any input would be much appreciated 1

Answer 1

I ended up solving this issue by doing the following:
1 - remove the following class
embed-responsive
2- Adjust padding on
.embed-responsive-16by9 {
padding-bottom:0;
}