Youtube – Can one determine the still image in a shared YouTube video

embedimagessharingthumbnailyoutube

If one shares a YouTube video in a post on a website (Facebook etc.) that shows a video player where you can press "Play", a still image is already showing. How is this image chosen from the video? Is it possible to determine the time of the still image yourself?

Edit

I mean the case of a YouTube video you did not upload yourself.

Best Answer

Yes, it is possible. After you upload/submit the video you can choose autogenerated thumbnail images for your video:

0

or you can set your own image after your account gets verified:

0

The verification process looks like this:

0

If the video is not yours you can still do it by editing the embed code - for example:

official embed code:

<iframe width="560" height="315" 
 src="https://www.youtube.com/embed/im-JM0f_J7s" 
 frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
 picture-in-picture" allowfullscreen></iframe>

workaround solution:

<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
   <img src="https://i.imgur.com/wEEFvCB.png" style="cursor:pointer" />
</div>
<div style="display:none">

    paste embed code here

</div>

You can try it yourself here: https://www.w3schools.com/html/tryit

Or something more advanced like: 

<div width="560px" height="315px" style="position: static; clear: both; 
 width: 560px; height: 315px;">&nbsp;
<div style="position: relative">
<img id="vidimg" width="560px" height="315px" 
 src="https://i.imgur.com/wEEFvCB.png" style="position: absolute; 
 top: 0; left: 0; cursor: pointer; pointer-events: none; z-index: 2;" />

<iframe id="unlocked-video" style="position: absolute; top: 0; left: 0; z-index: 1;" 
 src="https://www.youtube.com/embed/im-JM0f_J7s" width="560" height="315" frameborder="0" 
 allowfullscreen="allowfullscreen"></iframe>

</div>
</div>
<script type="application/javascript">
  var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.id == 'unlocked-video'){
      document.getElementById('vidimg').style.display='none';
      clearInterval(monitor);
    }
  }, 100);
</script>

0

Related Topic