purple11111 purple11111 - 6 months ago 100
jQuery Question

How to target autoplay attribute in HTML 5 Video element inside modal

I have a HTML 5 video element inside a modal window. Now I need a check that if modal is opened and video element has autoplay then play the video. If the video does not have the attribute autoplay then do not play the video.

http://codepen.io/hennysmafter/pen/YqmLKR

For the full code look at the Codepen above please.

<video id="somevid" controls autoplay loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>


So it needs to target the
autoplay
and it cannot use the ID field from the video it should target the video element inside
id: popup1
see Codepen!

$(document).ready(function(){
$('a[data-modal-id]').click(function(e) {
e.preventDefault();
if ($('.modal-box.opened').find('video').attr(autoplay) == true) {
console.log('CLICK: ModalBox if Video Autoplay is true.');
}
});
});


The code where the problem is above. Now I know this only gives me a log that is just for testing.

This code gives the error: Uncaught ReferenceError: autoplay is not defined

Thank you in advance for helping.

Answer

You're using the variable autoplay rather than the string "autoplay", try updating your code to this:

if ($('.modal-box.opened').find('video').attr('autoplay') == true) {
  console.log('CLICK: ModalBox if Video Autoplay is true.');
}

UPDATE:

Try this instead:

if (($('.modal-box.opened').find('video').attr('autoplay') === 'autoplay')) {
  $('.modal-box.opened').find('video').get(0).play();
}
Comments