YouTube embedded video set different thumbnail

Question

I want to embed a video from YouTube that is not mine  so I can not change it at YouTube   The video has a thumbnail that is not representative for the video  I refer to the initial still that is shown when you embed a video  shown before the user plays it     Is there a way to set the time of the still  for instance I tried passing  s XXX but this does not work   Or another way that comes natively with YouTube

User · Answer

Your best bet would be to use the tutorial on http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289. This will ensure there is no double clicking and that YouTube's video doesn't autoplay behind your image prior to clicking it.

Do not plug in the YouTube embed code as YT(YouTube) gives it (you can try, but it will be ganky)...instead just replace the source from the embed code of your vid UP TO "&autoplay=1" (leave this on the end as it is).

eg.)

Original code YT gives:

`<object width="420" height="315"><param name="movie" value="//www.youtube.com/v/5mEymdGuEJk?hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/5mEymdGuEJkhl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>`

Code used in tutorial with same YT src:

`<object width="420" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess"value="always" /><param name="src" value="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="420" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object>`

Other than that, just replace the img source and path with your own, and voilà!

User · Answer

Just copy and paste the code in HTML file  and enjoy the happy coding  Using Youtube api to manage the thumbnail of youtube embedded video    lt  DOCTYPE html gt   lt html gt   lt body gt       lt script src  http   code jquery com jquery-1 8 3 min js  gt  lt  script gt       lt script gt          var tag   document createElement  script             tag src    https   www youtube com iframe api           var firstScriptTag   document getElementsByTagName  script   0           firstScriptTag parentNode insertBefore tag  firstScriptTag            var player          function onYouTubeIframeAPIReady                 player   new YT Player  player                     height   390                   width   640                   videoId   M7lc1UVf-VE                   events                         onReady   onPlayerReady                                                       function onPlayerReady event                    play vid   click function                     event target playVideo                                         document  ready function                     player   hide                    play vid   click function                         player   show                        play vid   hide                                     lt  script gt        lt div id  player  gt  lt  div gt       lt img id  play vid  src  YOUR IMAGE PATH    gt   lt  body gt   lt  html gt

User · Answer

This tool gave me following results which helps me achieve the task as following code    lt div onclick  play     id  vidwrap  style  height 315px width 560px background  black url  http   example com image jpg   no-repeat center overflow hidden cursor pointer   gt  lt  div gt   lt script type  text javascript  gt      function play            document getElementById  vidwrap   innerHTML     lt iframe width  560  height  315  src  http   www youtube com embed xxxxxxxxx autoplay 1  frameborder  0  gt  lt  iframe gt           lt  script gt

User · Answer

No   Most YouTube videos only have one pre-generated  poster  thumbnail  480x360   They usually have several other lower resolution thumbnails  120x90    So even if there were an embedding parameter to use an alternate poster image  which there isn t   it s result wouldn t be acceptable     You can theoretically use the Player API to seek the video to whatever location you want  but this would be a major hack for a minor result

User · Answer

Using the concept from waldyrious s answer  I ve created the following solution that also addresses the issue of the video playing behind the image on tab restore or using the browser s back button to come back to the page with the video   HTML   lt div class  js-video-lead  gt     lt img class  hide  src  link to lead image jpg    gt     lt iframe frameborder  0  height  240  src  https   www youtube com embed  lt code here gt   width  426  gt  lt  iframe gt   lt  div gt    The  hide  class is from Bootstrap and simply applies display  none  so that the image is not visible on page load if JavaScript is disabled   JavaScript  function video lead play state element  active        var  active     element  closest   js-video-lead   find   btn-play-active        var  default     element  closest   js-video-lead   find   btn-play-default         if  active             active show             default hide          else            active hide             default show                document  ready function             hide the videos and show the images     var  videos       js-video-lead iframe         videos hide            js-video-lead  gt  img   not   btn-play   show            position the video holders         js-video-lead   css  position    relative            prevent autoplay on load and add the play button      videos each function  index  video            var  video     video               prevent autoplay due to normal navigation         var url    video attr  src            if  url indexOf   amp autoplay    gt  -1                url   url replace   amp autoplay 1                  else               url   url replace   autoplay 1                           video attr  src   url  removeClass               js-video-lead-autoplay                         add and position the play button         var top   parseInt parseFloat  video css  height      2  - 15          var left   parseInt parseFloat  video css  width      2  - 21          var  btn default       lt img   gt    attr  src    play-default png   css                position    absolute                top   top    px                left   left    px                z-index   100            addClass  btn-play btn-play-default            var  btn active       lt img   gt    attr  src    play-active png   css                display    none                position    absolute                top   top    px                left   left    px                z-index   110            addClass  btn-play btn-play-active                js-video-lead   append  btn default  append  btn active                     js-video-lead img   on  click   function  event            var  holder     this  closest   js-video-lead            var  video    holder find  iframe            var url    video attr  src            url     url indexOf       gt  -1      amp                  url     autoplay 1            video addClass  js-video-lead-autoplay   attr  src   url            holder find  img   remove             video show                     js-video-lead  gt  img   on  mouseenter   function  event            video lead play state this  true                    js-video-lead  gt  img   not   btn-play   on  mouseleave   function  event            video lead play state this  false                 jQuery is required for this solution and it should work with multiple embedded videos  with different lead images  on the same page   The code utilizes two images play-default png and play-active png which are small  42 x 30  images of the YouTube play button  play-default png is black with some transparency and is displayed initially  play-active png is red and is displayed when the user moves the mouse over the image  This mimic s the expected behavior that a normal embedded YouTube video exhibits

User · Answer

I was having trouble with the autoplay from waldir s solution    using autoplay  the video was playing when the page loaded  not when the div got displayed   This solution worked for me except I replaced   lt a class  introVid  href   video  gt Watch the video lt  a gt  lt  p gt    with   lt a class  introVid  href   video  gt  lt img src  images NEWTHUMB jpg  style  cursor pointer    gt  lt  a gt    so that it would use my thumbnail in place of the text link

User · Answer

This solution is HTML and CSS based using z-index and hover  which works if JS is disabled or the video isn t yours  since you can add a thumbnail in YouTube     lt style gt   videoWrapper     position  relative    padding-bottom  56 25      videoWrapper  video-modal-poster img     position  absolute    width  100     height  100     top  0    left  0    z-index  10     videoWrapper  video-modal-poster hover img     z-index 0     videoWrapper iframe     position  absolute    top  0    left  0    width  100     height  100     z-index  1     lt  style gt   lt div class  videoWrapper  gt     lt a href     class  video-modal-poster  gt       lt img alt    src    width  353  height  199    gt       lt iframe width  353  height  199  src  https   www youtube com embed   frameborder  0  allowfullscreen  allowfullscreen  gt  lt  iframe gt     lt  a gt   lt  div gt

User · Answer

This solution will play the video upon clicking  You ll need to edit your picture to add a button image yourself   You re going to need the URL of your picture and the YouTube video ID  The YouTube video id is the part of the URL after the v  parameter  so for https   www youtube com watch v DODLEX4zzLQ the ID would be DODLEX4zzLQ      lt div width  560px  height  315px  style  position  static  clear  both  width  560px  height  315px   gt  amp nbsp  lt div style  position  relative  gt  lt img id  vidimg  width  560px  height  315px  src  URL TO PICTURE  style  position  absolute  top  0  left  0  cursor  pointer  pointer-events  none  z-index  2     gt  lt iframe id  unlocked-video  style  position  absolute  top  0  left  0  z-index  1   src  https   www youtube com embed YOUTUBE VIDEO ID  width  560  height  315  frameborder  0  allowfullscreen  allowfullscreen  gt  lt  iframe gt  lt  div gt  lt  div gt   lt script type  application javascript  gt       Adapted from https   stackoverflow com a 32138108   var monitor   setInterval function        var elem   document activeElement      if elem  amp  amp  elem id     unlocked-video          document getElementById  vidimg   style display  none         clearInterval monitor              100    lt  script gt    Be sure to replace URL TO PICTURE and YOUTUBE VIDEO ID in the above snippet   To clarify what s going on here  this displays the image on top of the video  but allows clicks to pass through the image  The script monitors for clicks in the video iframe  and then hides the image if a click occurs  You may not need the float  clear   I haven t compared this to the other answers here  but this is what I have used

User · Answer

There s a nice workaround for this in the sitepoint forums    lt div onclick  this nextElementSibling style display  block   this style display  none   gt      lt img src  my thumbnail png  style  cursor pointer    gt   lt  div gt   lt div style  display none  gt       lt  -- Embed code here -- gt   lt  div gt    Note  To prevent having to click twice to make the video play  use autoplay 1 in the video embed code  It will start playing when the second div is displayed

User · Answer

It s possible using jQuery it depends on your site load time you can adjust your timeout   It can be your custom image or you can use youtube image maxres1 jpg  maxres2 jpg or maxres3 jpg  var newImage    http   i ytimg com vi  Video ID  maxres1 jpg   window setTimeout function     jQuery  div  gt  div video-container-thumb  gt  div  gt  a  gt  img   attr  src  newImage       300

User · Answer

The answers did not work for me  Maybe they were outdated   Anyway  found this website  which does all the job for you  and even prevent you from needing to read the unclear-as-usual google documentation  http   www classynemesis com projects ytembed

[video] YouTube embedded video: set different thumbnail

Examples related to video

Examples related to youtube