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.
Related
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
I am trying to load pdf in iframe when clicked on Open PDF on this same page below the table.
This pdf is opening on the new tab when I use target=blank but is not opening in iframe.
<c:forEach items="${files}" var="file">
<tr>
<td>${file.name}</td>
<td>${file.createdOn}</td>
<td>Open PDF</td>
</tr>
</c:forEach>
</table>
<iframe src="" width="100%" height="100%" name="search_iframe"></iframe>
</body>
I am using bootstrap 4 for my one of the theme and I open modal on button click and in that modal I put the iframe for open my PFD. you may also try this once. if you are not using bootstrap you can create your own customize modal.
<a href="javascript:void(0);" data-toggle="modal" data-target="#staffInformationForCBSE">
<div class="modal fade" id="staffInformationForCBSE">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text_orange">Staff Information for CBSE</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe class="pdf_documents" src="documents/StaffInfoForCBSE.pdf"></iframe>
</div>
</div>
</div>
</div>
I have used a single page HTML page in which I have three div. When I click one of the div modal popups and loads the iframe src. The problem I am facing is iframe is not getting loaded properly when I click the div first time. However in chrome, if I right click and then enter reload frame, my iframe is getting loaded properly. Can anyone say what is the issue I am facing? Why the iframe is not getting loaded properly the first time. I am clueless about this issue. Could anyone please assist me.
My html Code : Posting one div and its corresponding modal popup code
Div Code :
<div class="bots" data-toggle="modal" data-target="#myartModal">
<font class ="botHeading" ><b> Password Related</b></font><br />
<font class = "botsub">Click here to Change,reset,enroll or unlock your account.</font>
</div>
Modal Popup
<div class="container">
<!--<h2>Basic Modal Example</h2>
Trigger the modal with a button
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
<!-- Modal -->
<div class="modal fade" id="myartModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg customModalHeight" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header customModalHeader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" ><b>Account Recovery Agent</b></h3>
</div>
<div class="embed-responsive embed-responsive-4by3 z-depth-1-half customIframeHeight">
<iframe class = "embed-responsive-item" src="http:/xx.xx.xx.xx:4001/" allowfullscreen></iframe>
<!-- <iframe class = "embed-responsive-item" src="http://xx.xx.xx.xx:4001/" allowfullscreen></iframe> -->
</div>
</div>
</div>
</div>
</div>
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>