I've embedded a youtube video on this site: link
I would like to place an image above the video when it is paused at startup.
I already did that but it was tagged 'video'. Can you do this with the iframe (this can be called an API?) From youtube too?
Just add the code in the indicated section of this url:
https://img.youtube.com/vi/<codigo>/0.jpg
Example
link
What I did was leave a still image. When the user clicks on the image, the iframe (without src) receives the src attribute, which is written to data-src of the image.
These days ago, 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><imgid="img" src="https://img.youtube.com/vi/zzOv14tnaWU/0.jpg"data-src="https://www.youtube.com/watch?v=zzOv14tnaWU" />
<iframe id="frame"></iframe>See:
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 background image, you place your cover. If you want you can put the button on top cover with position: absolute . Then it goes from what you need.