I currently have a video that opens in a modal window on button click. How do I make the video autoplay when the modal window opens?
The modal script i'm using is called 'Remodal' found here http://vodkabears.github.io/remodal/
===================
FIDDLE
https://jsfiddle.net/tsdev/o4ndexuw/1/
===================
HTML
<!--
Button
================================================================================== -->
<button class="image-button" onclick="window.location.href='#modal'">
<span class="label">Watch Careers Video</span>
<span class="icon flaticon-arrow"></span>
</button>
<!--
Video Modal
================================================================================== -->
<div class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<div class="video-container clearfix">
<div class="video clearfix">
<embed width="200" height="113" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen></embed>
</div>
</div>
</div>
JQUERY
<script src="<?php bloginfo('template_directory'); ?>/templates/careers/plugins/remodal/remodal.js"></script>
<script>
var stopVideo = function ( element ) {
var iframe = element.querySelector( 'embed');
var video = element.querySelector( 'video' );
if ( iframe !== null ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
if ( video !== null ) {
video.play();
}
};
$('.remodal-close, .remodal-overlay').click(function(){
var id = this.id || this.getAttribute( 'data-id' );
var modal = document.querySelector( id );
//closePopup();
stopVideo( modal );
});
// The second way to initialize:
/*$('[data-remodal-id=modal2]').remodal({
modifier: 'with-red-theme'
});*/
</script>
