purple11111 purple11111 - 5 months ago 83
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.


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.

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

$('a[data-modal-id]').click(function(e) {
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.


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.');


Try this instead:

if (($('.modal-box.opened').find('video').attr('autoplay') === 'autoplay')) {