start play embedded iframe youtube-video on click of an image

Question

I m trying to start playing an embedded youtube video by clicking an image  The idea is to have an image on top of a video  and when the image is clicked it fades out and starts playing the video   I m using jquery to fade the image  and was hoping to find a way to play or click the video using jquery as well    The fading is working fine  but I can t figure out how to trigger the video to play   I got it to work on a couple of browsers by setting the video to autoplay and hide it  and then fade in the video when the image was clicked  On most browsers the video would autoplay when faded in  but in chrome it started to autoplay even when it was hidden  It didn t work well in iOS either   Since I m pretty new at this  I m not even sure if I m writing it 100  correct  but I ve tried something like this without success            IMAGE   click function         VIDEO   play          So  how would I go about to make the video play on an image click   Is there a way to play the video when the image is clicked  just using jquery   Thank you in advance

User · Answer

To start video   var videoURL       playerID   prop  src    videoURL      amp autoplay 1       playerID   prop  src  videoURL     To stop video   var videoURL       playerID   prop  src    videoURL   videoURL replace   amp autoplay 1            playerID   prop  src           playerID   prop  src  videoURL     You may want to replace   amp autoplay 1  with   autoplay 1  incase there are no additional parameters  works for both vimeo and youtube on FF  amp  Chrome

User · Answer

Html Code -   lt a href     id  playerID  gt Play lt  a gt   lt iframe src  https   www youtube com embed videoID  class  embed-responsive-item  data-play  0  id  VdoID   gt  lt  iframe gt    Jquery Code -       playerID   click function        var videoURL       VdoID   attr  src        dataplay       VdoID   attr  data-play           for check autoplay       if not set autoplay 1     if dataplay    0                VdoID   attr  src  videoURL   autoplay 1                VdoID   attr  data-play  1               else          var videoURL       VdoID   attr  src            videoURL   videoURL replace   autoplay 1                    VdoID   prop  src                   VdoID   prop  src  videoURL                VdoID   attr  data-play  0                 Thats It

User · Answer

The quick and dirty way is to simply swap out the iframe with one that has autoplay 1 set using jQuery   THE HTML  Placeholder    lt div id  videoContainer  gt     lt iframe width  450  height  283  src  https   www youtube com embed VIDEO ID HERE wmode transparent  frameborder  0  allowfullscreen wmode  Opaque  gt  lt  iframe gt   lt  div gt      Autoplay link    lt a class  introVid  href   video  gt Watch the video lt  a gt  lt  p gt      THE JQUERY  The onClick catcher that calls the function  jQuery  a introVid   click function      autoPlayVideo  VIDEO ID HERE   450   283            The function    --------------------------------   Swap video with autoplay video ---------------------------------    function autoPlayVideo vcode  width  height      use strict         videoContainer   html   lt iframe width    width    height    height    src  https   www youtube com embed   vcode   autoplay 1 amp loop 1 amp rel 0 amp wmode transparent  frameborder  0  allowfullscreen wmode  Opaque  gt  lt  iframe gt

User · Answer

You can do this simply like this      image id   click function           some id iframe   attr  src       some id iframe   parent  attr  src       autoplay 1           where image id is your image id you are clicking and some id is id of div in which iframe is also you can use iframe id directly

User · Answer

Example youtube iframe   lt iframe id  video  src  https   www youtube com embed xNM7jEHgzg4  frameborder  0  gt  lt  iframe gt    The click to play HTML element   lt div class  videoplay  gt Play lt  div gt     jQuery code to play the Video      videoplay   on  click   function             video   0  src      autoplay 1         Thanks to https   codepen io martinwolf pen dyLAC

User · Answer

You are supposed to be able to specify a domain that is safe for scripting   the api document mentions  As an extra security measure  you should also include the origin parameter to the URL  http   code google com apis youtube iframe api reference html src  http   www youtube com embed J---aiyznGQ enablejsapi 1 amp origin mydomain com   would be the src of your iframe   however it is not very well documented   I am trying something similar right now

User · Answer

This should work perfect just copy this div code   lt div onclick  thevid document getElementById  thevideo    thevid style display  block   this style display  none   gt   lt img style  cursor  pointer   alt    src  http   oi59 tinypic com 33trpyo jpg    gt   lt  div gt   lt div id  thevideo  style  display  none   gt   lt embed width  631  height  466  type  application x-shockwave-flash  src  https   www youtube com v 26EpwxkU5js version 3 amp amp hl en US amp amp autoplay 1  allowFullScreen  true  allowscriptaccess  always  allowfullscreen  true    gt   lt  div gt

[jquery] start/play embedded (iframe) youtube-video on click of an image

Examples related to jquery

Examples related to iframe

Examples related to youtube

Examples related to onclick

Examples related to embed