I'd like to autoplay a video in a pop-up once the user clicks "watch video". Right now my code is working fine on desktop, but on mobile (IOS) the video iframe opens but doesn't autoplay. I'm currently using a bootstrap modal and attaching & removing the video source on the click events, like this:
Watch Video
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<iframe width="100" height="180" id="myVideo" src="../static/img/videos/Whatsfordinner with filter.mp4" frameborder="0" allow="autoplay" allowfullscreen></iframe>
</div>
</div>
</div>
$(document).ready(function(){
// Save the url of the video in a variable
var url = $("#myVideo").attr('src');
// When the modal is closed remove the url of the iframe
$("#videoModal").on('hide.bs.modal', function(){
$("#myVideo").attr('src', '');
});
// When the modal is opened, add the url to the iframe
$("#videoModal").on('show.bs.modal', function(){
$("#myVideo").attr('src', url);
});
});
Should I be using a different solution?
I figured it out now - you need to use video instead of iframe. Here's my code for those interested:
<a href="#headerPopup" id="headerVideoLink" target="_blank" data-toggle="modal" data-target="#videoModal">
<div class="watch-now">
<img src="../static/img/Watch_Video.png" alt="Watch Video">
</div>
</a>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<video autoplay playsinline id="myVideo">
<source src="../static/img/videos/Whatsfordinner with filter.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
$(document).ready(function(){
// Save the url of the video in a variable
var url = "../static/img/videos/Whatsfordinner with filter.mp4";
// When the modal is closed remove the url of the iframe
$("#videoModal").on('hide.bs.modal', function(){
$("#myVideo").attr('src', '');
});
// When the modal is opened, add the url to the iframe
$("#videoModal").on('show.bs.modal', function(){
$("#myVideo").attr('src', url);
});
Hope this helps someone out there!
Related
I want my code to play a video but when I close the modal the music in the video still plays on the background.
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
I tried using jquery to fix it but nothing happens.
$(document).ready(function () {
var $videoSrc;
$('.btn-play').click(function () {
$videoSrc = $(this).data("src");
});
console.log($videoSrc);
$('#videoModal').on('shown.bs.modal', function (e) {
$("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
})
$('#videoModal').on('hide.bs.modal', function (e) {
$("#video").attr('src', $videoSrc);
})
});
To do what you require you can either stop or pause the video playing when the hide.bs.modal event fires.
You can do this by sending a postMessage to the iframe containing the embedded Youtube player. Note that the enablejsapi=1 parameter has to be included in the embed URL for this to work.
Here's a simplified example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>Play Video</div>
<div>Stop Video</div>
<div>Pause Video</div>
<iframe class="embed-responsive-item" id="video" width="560" height="315" src="https://www.youtube.com/embed/LDU_Txk06tM?enablejsapi=1&version=3&playerapiid=ytplayer" allowscriptaccess="always" allow="autoplay"></iframe>
let videoIframeContent = $('#video')[0].contentWindow;
// stop
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "stopVideo" }), '*');
// pause
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "pauseVideo" }), '*');
Here's a working demo in a jsFiddle and the snippet editor is sandboxed and won't allow video.
That's because the video wasn't stopped.
In the listener that listens to the hide.bs.modal event:
const video = $('#video').get(0);
video.pause();
video.currentTime = 0;
I think You need to use video tag instead of iframe to control video follow link
I want to show a video in modal. The video is shown perfectly and while I clicked the cross button, modal is hide and video is stopped. But after few seconds video starts automatically from back-end.
Here is my modal with the scripts
{{-- start modal --}}
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h1>Technology video</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<iframe width="100%" height="350" src="https://www.youtube.com/embed/HBdcL7YsdBY?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
{{-- end model --}}
{{-- start script --}}
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#videoModal').modal('show');
jQuery("#videoModal").on('hidden.bs.modal', function (e)
{
jQuery("#videoModal iframe").attr("src", jQuery("#videoModal iframe").attr("src"));
});
});
</script>
{{-- end script --}}
Why the video starts automatically? how to stop this?
Anybody help please ?
jQuery("#videoModal").on('hidden.bs.modal', function (e)
{
jQuery("#videoModal iframe").attr("src", "https://www.youtube.com/embed/HBdcL7YsdBY?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=0");
});
jQuery("#videoModal").on('show.bs.modal', function (e)
{
jQuery("#videoModal iframe").attr("src", "https://www.youtube.com/embed/HBdcL7YsdBY?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1");
});
success !!
just replace
jQuery("#videoModal iframe").attr("src", jQuery("#videoModal iframe").attr("src"));
by
jQuery("#videoModal iframe").attr("src", jQuery("#videoModal iframe").attr("src", ''));
I am listing out video data from sql table.
Fields in tha table:
- sidebar_video_id (auto increment)
- sidebar_video_nev
- sidebar_video_link (full url)
- sidebar_video_v_id (video id from at the url end)
What i want, is when i click on each video, it opens and play in a bootstrap modal box. Now the box opens, but its empty and i dont get any console erros.
<?php
$get_videos = mysqli_query($kapcs, "SELECT * FROM sidebar_video");
if(mysqli_num_rows($get_videos) > 0 )
{
while($vid = mysqli_fetch_assoc($get_videos))
{
echo '<div class="sidebar_youtube_box">';
echo '<img src="http://img.youtube.com/vi/'.$vid['sidebar_video_v_id'].'/hqdefault.jpg" class="img-responsive">';
echo '</div>';
}
}
?>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Bezárás</span></button>
<h4 class="modal-title" id="myModalLabel">Videó megtekintése</h4>
</div>
<div class="modal-body" id="video_modal_body">
</div>
</div>
</div>
</div>
$('.open_youtube_modal').click(function(e) {
e.preventDefault();
var v_id = $(this).attr('id');
var full_url = $(this).attr('data-url');
var embed_html = '<iframe width="560" height="315" src="' + full_url + '" frameborder="0" allowfullscreen></iframe>';
//alert(embed_html);
$('#video_modal_body').html(embed_html);
$('#videoModal').modal('show');
});
You have to use the https://www.youtube.com/embed/[videoId] format as opposed to the https://www.youtube.com/watch?v=[videoId]. Youtube does not permit cross-origin framing with the latter one.
I am using the following code to load different youtube videos into a Twitter Bootstrap modal. Why is it that IE8 is the only browser that does not load the youtube video? It just displays a black div where the video would normally show up. There are more videos to be uploaded and a lot of additional scripts on the page I am working on, so I am trying to keep this as flexible and lightweight as possible. Any suggestions would be appreciated. Thanks! jsfiddle at bottom.
<div id="Videos">
<a data-source="http://www.youtube.com/embed/z4Ezruu1oeQ" href="#" class="videoThumbnail">
<img src="http://placehold.it/200x100&text=Video%20Thumbnail%20One"></a>
<a data-source="http://www.youtube.com/embed/3tYrd4tPVXs" href="#" class="videoThumbnail">
<img src="http://placehold.it/200x100&text=Video%20Thumbnail%20Two"></a>
</div>
<div id="videoModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
<div class="modal-body">
<div class="video-container">
<iframe width="520" height="390" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
The Javascript:
$('.videoThumbnail').click(function(e) {
e.preventDefault();
var src = $(this).data('source');
$('#videoModal').modal('show');
$('#videoModal iframe').attr('src', src);
});
$('#videoModal button').click(function () {
$('#videoModal iframe').removeAttr('src');
});
http://jsfiddle.net/curly33/LTxm7/
I'd suggest letting the html do the work.
<a href="http://www.youtube.com/embed/z4Ezruu1oeQ" target="videoIframe" class="videoThumbnail">
and
<iframe name="videoIframe" width="520" height="390" frameborder="0" allowfullscreen=""></iframe>
small modification to js:
$('.videoThumbnail').click(function(e) {
$('#videoModal').modal('show');
});
$('#videoModal button').click(function () {
$('#videoModal iframe').removeAttr('src');
// ^^ is this really needed? ^^
});
http://jsfiddle.net/LTxm7/3/
I need a simple demo of how to launch and close a YouTube video in a Twitter Bootstrap Modal from JavaScript (rather than an anchor tag click).
So far I can launch it just fine, but on close it keeps playing in the background.
Here's my html:
<div id="myModalThumbnail"><img src="http://placehold.it/250x150&text=Video%20Thumbnail">
</div>
<div id="myModal" class="modal hide fade" 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>
</div>
<div class="modal-body">
<iframe width="520" height="390" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
Javascript:
$('#myModalThumbnail').click(function () {
var src = 'http://www.youtube.com/v/KVu3gS7iJu4&rel=0&autohide=1&showinfo=0&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
And a jsfiddle: http://jsfiddle.net/VtKS8/5/
What next?
Well, looks like all I needed to do was remove the src attribute on the button click.
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
JSFiddle: http://jsfiddle.net/VtKS8/6/
This is the updated version for bootstrap 3 using the built in bootstrap hooks
<script>
$( document ).ready(function() {
$('#audiomodal').on('hidden.bs.modal', function () {
$( "audio" ).attr('src', '');
});
});
</script>