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

by

The quick and dirty way is to simply swap out the iframe with one that has autoplay=1 set using jQuery.

THE HTML

Placeholder:

<div id="videoContainer">
  <iframe width="450" height="283" src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>

Autoplay link:

<a class="introVid" href="#video">Watch the video</a></p>

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('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}

More Related Contents:

  1. How to add click event to a iframe with JQuery
  2. How to access the content of an iframe with jQuery?
  3. call Fancybox in parent from iframe
  4. How can I simulate an anchor click via jquery?
  5. How to have click event ONLY fire on parent DIV, not children?
  6. Catch error if iframe src fails to load . Error :-“Refused to display ‘http://www.google.co.in/’ in a frame..”
  7. Pass jquery variables between iframe and parent
  8. Get HTML inside iframe using jQuery
  9. how to block website from loading in iframe?
  10. How to display an IFRAME inside a jQuery UI dialog
  11. How do I load an url in iframe with Jquery
  12. Add CSS to iFrame [duplicate]
  13. fancy box work with iframes in beforeShow function?
  14. Fancybox stuck loading iframe in IE
  15. What are the significant differences among $(sel).bind(“click”, $(sel).click(, $(sel).live(“click”, $(sel).on(“click”?
  16. Check if YouTube video is playing and run script
  17. Retrieving HTTP status code from loaded iframe with Javascript
  18. Close jQuery UI Dialog from Iframe
  19. jquery get height of iframe content when loaded
  20. Getting youtube.com to load in iFrame
  21. Change HTML of an iFrame with jQuery?
  22. How do I dynamically change the content in an iframe using jquery?
  23. Youtube iframe api not triggering onYouTubeIframeAPIReady
  24. access div in iframe parent
  25. Click toggle with jQuery
  26. Open YouTube video in Fancybox jQuery
  27. Getting the current src of an Iframe using JQuery [duplicate]
  28. Weird behaviour of iframe `name` attribute set by jQuery in IE
  29. Using jQuery to grab the content from CKEditor’s iframe
  30. How can I list the uploads from a YouTube Channel?

Leave a Comment