I am playing embed YouTube video inside bootstrap modal, when i close modal video still playing in background.
Please help me
<!-- Button trigger modal -->
<button type="button" class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#vid1" id="pbtn">
<i class="fas fa-play" style="color: #ebaf02;font-size: 24px;"></i>
</button>
<!-- Modal -->
<div class="modal fade" id="vid1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<iframe id="video101" src="https://www.youtube.com/embed/il_t1WVLNxk" width="760" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script>
var myModal101 = document.getElementById('vid1')
var myInput101 = document.getElementById('video101')
myModal101.addEventListener('hide.bs.modal', function () {
myInput101.get(0).stopVideo();
})
</script>
This will work for you.
$('#vid1').on('hide.bs.modal', function(){
$('#video101').attr('src', $('#video101').attr('src'));
});
Working Fiddle
Related
I tried to make a modal with an iframe.
<a href="#" data-toggle="modal" data-target="#exampleModal">
<img id="imageresource" src="http://www.justdeluxe.at/wordpress/wp-content/uploads/2019/01/nature-3048299_1920.jpg" style="width: 400px; height: 264px;"></a>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-body">
<iframe src="https://player.vimeo.com/video/80836225?badge=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
</div>
What I found out is, when u remove the <div class="modal content"> I have my iframe perfectly responsive.
The problem is, that I cant play the video. So the iframe doesn't responsive when clicking.
Does anyone know why?
The original code for the modal was this: https://getbootstrap.com/docs/4.0/components/modal/
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Instead of removing the .modal-content, override its style:
#exampleModal .modal-content {
background: transparent;
border: none;
}
Example: https://jsfiddle.net/Sirence/jdfg5to6/5/
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
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;
}
I want to load one page inside another(I'm working with laravel ). I have a link on the page, when user clicks on a button, a bootstrap popup modal will be shown. So I need to load the whole page (including scripts and styles) in this bootstrap popup modal. The problem is my loaded page in popup, doesn't work correctly.. and I don't know how to load my scripts into my modal.. I have tried with iframes but it doesn't work either with the error 'X-Frame-Options' with 'deny' value..
Can anyone help me to resolve it?
thanks with regards
its a sample of my code:
<a class="btn"
title="View"
data-toggle="modal"
data-target="#cv_view">
<span class="glyphicon glyphicon-eye-open"></span>
</a>
{{-- modal--}}
<div class="modal fade"
id="cv_view"
tabindex="-1"
role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe
:src="cv.viewRoute"
style="zoom:3"
width="100%"
height="250"
frameborder="0">
</iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
I have a JSFiddle here - http://jsfiddle.net/n90Lexgc/
I'm using bootstrap modal to load a vimeo video.
I've added CSS to make the video larger and responsive.
My problem is I've lost the play button in the video.
If I click the video it plays and stops, but I have no play button.
<!-- video player -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content embed-responsive embed-responsive-16by9">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="1000" height="528" frameborder="0" allowfullscreen="" class="embed-responsive-item"></iframe>
</div>
</div>
</div>
</div>
<!-- video player -->
<div class="container-fluid">
<div clas="row">
<button class="js-play" data-vid="105100455">Video</button>
</div>
</div>
Its not that your buttons are missing, they're just pushed so far down you can't see them.
You'll need to cut some of the padding from your modal-body.
.modal-body {
...
padding-bottom: 49%;
...
}
JSFiddle
I am building a small static website on the popular BootStrap framework. I can't give a link unfortunately but essentially I have build a modal box which comes down on a button click with a YouTube video embedded into it.
It works fine but if you close the modal box then it disappears but leaves the YouTube video hovering over everything else with no way to get rid of it. This is on IE10.
Has anybody else tried embeddding videos into BootStrap Module boxes and have a solution for this?
Thanks in advance,
Jack
EDIT
OK, here is a snippet of code:
<a id="mediaVideo" class="btn btn-primary btn-large" href="#" data-toggle="modal" data-target="#video">Watch the interview</a>
<!-- Modal -->
<div id="video" class="modal hide fade" style="color: #2a2a2a; width: 590px;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">This is the modal title</h3>
</div>
<div class="modal-body">
<p>Small paragraph to describe the video</p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/H542nLTTbu0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close Window</button>
<div class="btn-group">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
Share This Video
<span class="caret"></span>
</a>
<ul class="dropdown-menu" align="left">
<li>Facebook</li>
<li>Twitter</li>
<li>Google+</li>
</ul>
</div>
</div>
</div>
<!--END MODAL-->
It seems to be working fine for me: jsFiddle. I am using the <iframe> option which is what is recommended when consulting the YouTube Embed API page at Google Developers.