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:
<a href="#headerPopup" id="headerVideoLink" target="_blank" data-toggle="modal" data-target="#videoModal"> Watch Video </a>
<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!