Is it possible to place a 'pre-image' in the youtube iframe?

Asked

Viewed 2,611 times

4

I embedded a Youtube video on this site: http://aresdapraca.com.br/

I would like to put an image over the video when it is paused at the beginning.

I already did this but it was with the tag 'video'. It gives to do this with iframe (this can be called API?) youtube also?

html5 css3 youtube
  • 2

    Yes, you have to use the Youtube API to do this. But then you can put the cover manually. But the button to start the video and the cover will come off you will use the API. I will try to post you an example.

2 answers

3


Just add the code to the given section of that url:

https://img.youtube.com/vi/<codigo>/0.jpg

Example

https://img.youtube.com/vi/uipTZ2re4Uk/0.jpg

What I did was leave a fixed image. When the user clicks on the image, iframe (without src) takes the attribute src , which is engraved on a data-src of the image.

These days, I did something like this:

$(function(){
   $('#img').click(function ()
   {
     var src = $(this).data('src');
     
     $('#frame').attr({src: src});
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img id="img" src="https://img.youtube.com/vi/zzOv14tnaWU/0.jpg" data-src="https://www.youtube.com/watch?v=zzOv14tnaWU" />
<iframe id="frame"></iframe>

  • 1

    The code in the iframe didn’t work. I don’t know if this is some limitation of the snippet

  • My code worked below without iframe too.

  • @Deesouza, mine changed the src of iframe. However, it does not load the content

  • Yes. Make that mistake: Refused to display 'https://www.youtube.com/watch?v=zzOv14tnaWU' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

  • So my example is made in a div, although the API turns into iframe.

2

Behold:

 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() {

 }

 function onPlayerReady(event) {
   event.target.playVideo();
 }

 function playVideo() {
   if (window.YT) {
     player = new YT.Player('player', {
       height: '360',
       width: '640',
       videoId: 'AcXC_T-TDeU',
       playerVars: {
         'autoplay': 0,
         'controls': 0,
         'rel': 0,
         'showinfo': 0
       },
       events: {
         'onReady': onPlayerReady
       }
     });
   }
 }
 html {
   text-align: center;
 }
 #player {
   display: inline-block;
   width: 640px;
   height: 360px;
   background: url(http://placehold.it/640x360) no-repeat;
 }
<div id="player"></div>
<p>
  <button onclick="playVideo()">Play</button>
</p>

In place of the background image background, you put your cover. If you want you can put the button on top cover with position: absolute. Then go what you need.

Browser other questions tagged html5 css3 youtube

You are not signed in. Login or sign up in order to post.