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 a

Solution 1:

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();
}

Solution 2:

I think you forgot the quotes around autoplay, like

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

Moreover, it should perhaps be used prop("autoplay"), knowing that autoplay is a property

EDIT : Autostart

$(this).get(0) doesn't return the desired element, so you must recover the video again :

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

Solution 3:

To check if autoplay is set:

var$video = $('.modal-box.opened').find('video');

if( typeof $video.attr('autoplay') === "string"){
    $video.get(0).play();
}

or to check if autoplay is not set:

if( typeof $video.attr('autoplay')  === "undefined"){
    //Logic here
}

Solution 4:

Please Check this Example I hope It would be helpful

[1]: https://jsfiddle.net/NbE9d/570/