Full Disclosure Confession: This is not a question, but a question with some answers.
I did not initially like the three choices of thumbnails that Youtube.com selected, so ...
Question: How do I display a custom thumbnail or splash screen for my embedded youtube video?
Answer #1: Accept Monetization option with Youtube.com and a button to create a custom thumbnail magically appears. NOTE: this was definitely NOT an acceptable option for me since my Youtube movie, entitled "My Love Song Forever", is a Love Song to my wife (whose lyrics I wrote and whose production I shared in). Have random ads appear together with my Love Song to my bride of over 51 years ... not a chance!!!
Answer #2: By pass such a requirement using css and frames:
var videoSrc = "http://www.youtube.com/embed/MxuIrIZbbu0";
var videoParms = "?autoplay=1&fs=1&hd=1&wmode=transparent";
// style of thumbNail's image must equal style of video for the 2 to overlap
var youtubeVideo = "" +
"<div>" +
"<iframe class='ls_video' src='" + videoSrc + videoParms + "'>" +
"</iframe>" +
"</div>";
var theThumbNail = "" +
"<div onclick=\"this.innerHTML = youtubeVideo;\">" +
"<img class='ls_video' src='images/MLSFthumbnail.jpg' style='cursor:pointer' alt='splash' \/> " +
"</div>";
document.write (theThumbNail);
I read somewhere that the thumbnail should spec at 1280px by 840px, so that is what I did.
IN THE INTEREST OF FULL DISCLOSURE, writing your own custom thumbnail THIS WAY will defeat the natural view counting that Youtube.com keeps track of. View counting will happen ONLY WHEN you go the monetization route.
THE CHOICE IS YOURS.
BOTTOM LINE ... I chose to be concerned about the View Count, so I regretfully chose one of the 3 thumbnail choices that Youtube.com offered;
See --- http://lovesongforever.com
Just copy and paste the code in an HTML file and enjoy the happy coding.
Using youtube api to manage the youtubed embedded video thumbnail.
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
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();
});
});
</script>
<div id="player"></div>
<img id="play_vid" src="YOUR_IMAGE_PATH" />
</body>
</html>
Related
I've been using the iframe embed with control=2 parameter as described by the docs for years.
https://developers.google.com/youtube/player_parameters
Today 7/20/17 all the placeholder thumbnails have stopped showing.
I can still see the thumbnail in the resulting css code as a background image url. The Thumbnail though just doesn't show.
So to recap while the following still show a thumbnail
<iframe width="560" height="315" src="https://www.youtube.com/embed/1sO5OKez0JQ?rel=0&controls=1" frameborder="0" allowfullscreen></iframe>
Changing the value of control to 2, does not show the thumbnail anymore
<iframe width="560" height="315" src="https://www.youtube.com/embed/1sO5OKez0JQ?rel=0&controls=2" frameborder="0" allowfullscreen></iframe>
I've also noticed that bug for a week approximatively.
But actually there's a better way to load a Youtube iframe that costs less ressources than the classic controls=2 parameter.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.youtube-player{position:relative;width:560px;height:315px;cursor:pointer;background-color:#000000}
.youtube-player img{width:100%;height:auto;-webkit-transition: .4s all;-moz-transition: .4s all;transition: .4s all;}
.youtube-player .play{position:absolute;cursor:pointer;width:67px;height:47px;left:50%;margin-left:-34px;top:50%;margin-top:-24px;background:#ffffff;border-radius:20px;opacity:.8}
.youtube-player .play i{margin-top:-10px}
.youtube-player .play i:before{font-size:68px}
.youtube-player iframe{width:100%;height:100%;}
.youtube-player:hover .play{opacity:1}
.youtube-player:hover .play i{color:#cc181e}
</style>
<div class="youtube-player" data-id="0LRoDMe3mGk"></div>
<script>
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = ytplayerThumb(v[n].dataset.id);
div.onclick = ytplayerIframe;
v[n].appendChild(div);
}
});
function ytplayerThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/0LRoDMe3mGk/mqdefault.jpg">',
play = '<div class="play"><i class="fa fa-youtube-play" aria-hidden="true"></i></div>';
return thumb.replace("ID", id) + play;
}
function ytplayerIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/0LRoDMe3mGk?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
This is of course considering you already load Fontawesome for other purposes. If not you should adapt the play button the way it suits you.
Regards,
I have embedded HTML5 video with mp4 format. How to get thumbnail image like poster without using "poster" attribute. This problem coming on Safari and iOS. I have added video like below mentioned code.
<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>
On Chrome, IE, Firefox first frame of video coming as thumbnail image, but not coming on Safari and iOS.
simply add preload="metadata" in video tag and set #t=0.1 at url src, it will get the frame of 0.1s of your video as thumbnail
however, the disadvantage of this solution is when you click to play the video, it always start at 0.1s
<video preload="metadata" controls>
<source src="video.mp4#t=0.1" type="video/mp4">
</video>
If you want to do this without storing server side images it is possible, though a bit clunky... uses a canvas to record the first frame of the video and then overlay that over the video element. It may be possible to use the URL for the Canvas as a source for the Poster (eg video.poster = c.toDataURL();) but that requires correct CORS setup (not sure if the video was on your own server, and if you have control over that, so took the safest option). This will work best if video is correctly encoded for streaming (so MOOV atom is at the front of the video, otherwise it will be slow to draw the overlay - see this answer for more detail)
The HEAD contains styling for the video and the overlay (you will need to adjust sizing and position to suit your application)
<head>
<style>
video_box{
float:left;
}
#video_overlays {
position:absolute;
float:left;
width:640px;
min-height:264px;
background-color: #000000;
z-index:300000;
}
</style>
</head>
In the BODY you will need the div for the overlay and the video. The overlay div has an onclick handler to hide the overlay and start the video playing
<div id="video_box">
<div id="video_overlays" onclick="this.style.display='none';document.getElementById('video').play()"></div>
<video id="video" controls width="640" height="264">
<source src="BigBuck.mp4" type='video/mp4'>
</video>
</div>
</div>
Finally you will need code that will load the video, seek to the first frame and load the visual into a canvas that you then insert into the overlay
<script>
function generateOverlay() {
video.removeEventListener('seeked',generateOverlay); / tidy up the event handler so it doesn't redraw the overlay every time the user manually seeks the video
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = 640;
c.height = 264;
ctx.drawImage(video, 0, 0, 640, 264); // take the content of the video frame and place in canvas
overlay.appendChild(c); // insert canvas into the overlay div
}
// identify the video and the overlay
var video = document.getElementById("video");
var overlay = document.getElementById("video_overlays");
// add a handler that when the metadata for the video is loaded it then seeks to the first frame
video.addEventListener('loadeddata', function() {
this.currentTime = 0;
}, false);
// add a handler that when correctly seeked, it generated the overlay
video.addEventListener('seeked', function() {
// now video has seeked and current frames will show
// at the time as we expect
generateOverlay();
}, false);
// load the video, which will trigger the event handlers in turn
video.load();
</script>
this is a bit late but we had the same scenario. I can't use the attribute 'muted' because my videos are podcasts. This is what I came up with and I hope to share it with future visitors. What I did is load the video in the body tag, drew a canvas, retrieved as base64 and applied to the video as the background image.
Since my video should be fixed 150px in height, I computed the aspect ratio so that whatever height and width of the actual video, it will be resized into 150px height and dynamic width.
$('body').append('<video class="checkmeload" style="position:absolute;top:-10000px" controls preload="auto" playsinline src="//src-here"><source src="//src-here" type="//videotype-here"></video>');
$('body').find('.checkmeload').on('loadeddata', function(){
var video = $('.checkmeload');
var canvas = document.createElement('canvas');
aspectratio = (video[0].videoWidth / video[0].videoHeight);
newwidth = (150 * aspectratio);
canvas.width = newwidth;
canvas.height = 150;
var context = canvas.getContext('2d');
context.drawImage(video[0], 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
$('body').find('.checkmeload').remove();
$('#myvideo').css('background-image','url("'+dataURI +'")');
});
Source: How to set the thumbnail image on HTML5 video?
This worked for me:
<img src="thumbnail.png" alt="thumbnail" />
/* code for the video goes here */
Now using jQuery play the video and hide the image as
$("img").on("click", function() {
$(this).hide();
// play the video now..
})
Add #t=0.001 at the end of the video URL.
https://muffinman.io/blog/hack-for-ios-safari-to-display-html-video-thumbnail/
I have rel=0 in my embed code so when the video ends it returns to the start. But it's displaying the thumbnail for the video, after returning, with the thumbnail blown up to the full video size, so the image is extremely blurry. How can I get the full 1280 x 720 image I uploaded for the thumb to be displayed?
Thanks
You could, for example, detect when the video has ended and then overlay the video with your image. For example:
HTML:
<script src="//www.youtube.com/iframe_api"></script>
<div id='yt_container'>
<iframe id='element_id' width="853" height="480" src="//www.youtube.com/embed/LqeN31x-5gE?autoplay=1&enablejsapi=1&rel=0&start=248" frameborder="0" allowfullscreen></iframe>
<!--Seems like people always forget to encode & as &-->
<!--The "start" parameter was added for easier testing-->
<!--The `enablejsapi=1` parameter is required for this to work. For more information, see https://developers.google.com/youtube/iframe_api_reference
<div id='player_overlay_image'> </div>
</div>
CSS:
iframe,img,div{/*If you use this on a real web page, you will want to make these rules more specific*/
padding:0;
margin:0
}
div#yt_container{
position:relative;/* https://stackoverflow.com/a/105035/1419007 */
}
div#player_overlay_image{/* The high-resolution image for when your video has ended. Includes a ▶ button. */
display:block;
position:absolute;
top: 29px;
background: url('//i.imgur.com/JhDUWdI.png');
width:853px;
height:408px;
display: none;
cursor:pointer;
}
div#player_overlay_image:hover{/* ▶ button in active state. */
background: url(//i.imgur.com/ljKjsD4.png);
}
JavaScript:
var yt_player;
function onYouTubeIframeAPIReady() {
yt_player = new YT.Player('element_id', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if(event.data === YT.PlayerState.ENDED){
//Display overlay image
document.getElementById('player_overlay_image').style.display='block';
}
}
document.getElementById('player_overlay_image').addEventListener('click', function(evt){
//Hide overlay image
document.getElementById('player_overlay_image').style.display='none';
//Play video
yt_player.playVideo();
}, false);
(See the YouTube Player API Reference for iframe Embeds for more information.)
http://jsfiddle.net/y3Xqj/1/
I had the same problem and it didn't got solved by itself. This is how I solved the issue:
I used the youtube iframe api and rewinded the video to the start once the video ended, that way the thumbnail looks good as it was when the page loaded.
YoutubeF is the iframe id.
Code:
var YTplayer;
function onYouTubeIframeAPIReady()
{
YTplayer = new YT.Player('YoutubeF', { events: { 'onStateChange': onYTPlayerStateChange } });
}
function onYTPlayerStateChange(event)
{
if (event.data == 0)
{
YTplayer.seekTo(0, false)
}
}
Enjoy!
<iframe width="100%" height="100%" src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen>
If you remove ?autoplay=1 the video does not work. Looks like you cannot use the controls parameter without autoplay enabled.
Not sure why this is not mentioned in the YouTube embed writeup.
Hope I'm wrong.
https://developers.google.com/youtube/player_parameters#controls
Set autoplay=0
<iframe width="100%" height="100%" src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=0&showinfo=0&controls=0" frameborder="0" allowfullscreen>
As seen here: Autoplay=0 Test
To continue using the iframe YouTube, you should only have to change ?autoplay=1 to ?autoplay=0.
Another way to accomplish this would be by using the YouTube JavaScript Player API. (https://developers.google.com/youtube/js_api_reference)
Edit: the YouTube JavaScript Player API is no longer supported.
<div id="howToVideo"></div>
<script type="application/javascript">
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = false;
ga.src = 'http://www.youtube.com/player_api';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('howToVideo', {
height: '390',
width: '640',
videoId: 'qUJYqhKZrwA',
playerVars: {
controls: 0,
disablekb: 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
console.log('onPlayerReady', evt);
}
function onPlayerStateChange(evt) {
console.log('onPlayerStateChange', evt);
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
console.log('stopVideo');
player.stopVideo();
}
</script>
Here is a jsfiddle for the example: http://jsfiddle.net/fgkrj/
Note that player controls are disabled in the "playerVars" part of the player. The one sacrifice you make is that users are still able to pause the video by clicking on it. I would suggest writing a simple javascript function that subscribes to a stop event and calls player.playVideo().
use autoplay=0
autoplay takes 2 values.
Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.
the important part
autoplay=0&showinfo=0&controls=0
Here is the demo for ur problem FIDDLE
?modestbranding=1&autohide=1&showinfo=0&controls=0
autohide=1
is something that I never found... but it was the key :) I hope it's help
If you add this ?showinfo=0&iv_load_policy=3&controls=0 before the end of your src, it will take out everything but the bottom right YouTube logo
working example: http://jsfiddle.net/42gxdf0f/1/
Follow this https://developers.google.com/youtube/player_parameters for more info about video controls like:
<iframe id="video_iframe" width="660" height="415" src="http://www.youtube.com/v/{{course_url}}?start=7&autoplay=0&showinfo=0&iv_load_policy=3&rel=0"
frameborder="0"
allowfullscreen></iframe>
start=7&autoplay=0&showinfo=0&iv_load_policy=3&rel=0"
frameborder="0"
all controls are described in there
To remove you tube controls and title you can do something like this
<iframe width="560" height="315" src="https://www.youtube.com/embed/zP0Wnb9RI9Q?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen ></iframe>
code with output
showinfo=0 is used to remove title and &controls=0 is used for remove controls like volume,play,pause,expend.
You can hide the "Watch Later" Button by using "Youtube-nocookie" (this will not hide the share Button)
Adding controls=0 will also remove the video control bar at the bottom of the screen and using modestbranding=1 will remove the youtube logo at bottom right of the screen
However using them both doesn't works as expected (it only hides the video control bar)
<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/fNb-DTEb43M?controls=0" frameborder="0" allowfullscreen></iframe>
Autoplay works only with /v/ instead of /embed/, so change the src to:
src="//www.youtube.com/v/qUJYqhKZrwA?autoplay=1&showinfo=0&controls=0"
Video autoplay (including YouTubes autoplay=1) does not work on iOS Safari. That is thourougly documented by both Apple and a large number of blog posts.
This does however cause a problem with using custom controls for YouTube videos, that I can't find a definate yes/no answer for anywhere.
If I used a simple HTML5 video tag there would be no issue - but I would really rather not have to encode all the videos for all the different platforms.
What I need to accomplish is:
A cover image is shown (flat PNG with a play icon on top).
The user clicks the cover image, the image is replaced by a YouTube video that starts playing.
This is not autoplay from the users perspective, since it is initiated by a click. However on all non-Flash devices YouTube embeds are displayed in an iframe, causing the video to effectively be loaded and autoplayed (or at least, I think so).
Does anyone know of any workarounds for this problem?
This snippet illustrates the problem. It works in e.g. FireFox, but on iOS Safari it simple shows the loading indicator and then ends in a black screen.
If I add the "apple-mobile-web-app-capable" meta tag and fire up the site from the home screen, the videos play correctly.
<div id="movieContainer" style="width: 768px; height: 432px; border: 1px solid #cccccc;">Initializing player API...</div>
<div id="status">Initializing player API...</div>
<button onclick="player.playVideo();">Play</button>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var playerAPIIsLoaded = false;
function onYouTubePlayerAPIReady()
{
playerAPIIsLoaded = true;
document.getElementById("status").innerHTML = "Player API initialized!";
}
var player = null;
function initMovie()
{
document.getElementById("status").innerHTML = "Loading video..."
player = new YT.Player(
'movieContainer',
{
height: '432'
, width: '768'
, playerVars: { 'autoplay': 0, 'controls': 2, 'rel': 0, 'showinfo': 0 }
, videoId: 'MwnZr4VJQPQ'
, events: { 'onReady': function (event) { document.getElementById("status").innerHTML = "Video loaded!";/*event.target.playVideo();*/ } }
}
);
}
window.onload = initMovie;
</script>