CODEWITHSUNDEEP
javascriptphpvideoiframeyoutube
SM_Berwari
SM_Berwari

Reputation: 691

YouTube: play YouTube video just when click button

I have page contain YouTube embed in Iframe and i made it unclickable ,i want to play the video just when I click on play button ,I searched here and on the network and tested them but they don't work :

<div class="col-md-6">
        <div class='py-3' ><?php echo $course_name?></div>
        <div class="embed-responsive embed-responsive-16by9 px-6 py-6" style='pointer-events: none'>
            <iframe  id='video'
                src="<?php echo $course_video?>">  <!--the Youtube livk is come  from server as : https://www.youtube.com/embed/xxxxxxxxxxxx -->
            </iframe>
        </div>
        <div class='row w-100 justify-content-center mt-3'><button  class='btn bg-primary' id='play_video'><i class=" fa fa-play"></i></button></div>
</div>

and my JavaScript code :

$(document).ready(function(){
        $('#play_video').on('click', function(ev) {
            $("#video")[0].src += "&autoplay=1";
            ev.preventDefault();
        })

})

How can I do it ?

Upvotes: 1

Views: 1687

Answers (1)

Adriatic
Adriatic

Reputation: 1287

You forgot to add semicolons to your JavaScript:

$(document).ready(function() {
  $('#play-video').on('click', function(ev) {
    $("#video")[0].src += "&autoplay=1";
    ev.preventDefault();
 
  });
});

Also you forgot to add the link to your HTML file which is needed for clicking (<a id="play-video" href="#">Play Video</a><br />) and remove style='pointer-events: none' from your code:

<div class="col-md-6">
    <div class='py-3' ><?php echo $course_name?></div>
        <div class="embed-responsive embed-responsive-16by9 px-6 py-6">
            <a id="play-video" href="#">Play Video</a><br />
            <iframe  id='video' src="<?php echo $course_video?>">
            </iframe>
        </div>
</div>

Upvotes: 1

Related Questions