I used this url http://www.youtube.com/embed/uGNhirSbWW0?autoplay=1 to auto play this video in my amazon fireTv app using web View, i am getting the video but the video is not playing automatically? How to auto play the video in amazon firetv. any other way to play the youtube video
For someone who stumbled upon this problem when using Amazon Web Apps:
Somewhere in your code load Iframe Player API code
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Create an iframe and call event.target.playVideo() when onReady event fires
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Reference
Related
I’m attempting to use a YouTube video as a background but am unable to set the following parameters using
The YouTube video API
'autoplay': 1, 'controls': 0, 'mute' : 1, 'loop': 1
I’ve set my example on CodePen.
https://codepen.io/randometc/pen/GBXvKP
The function onYouTubeIframeAPIReady()
seems to be working(?) because the onStateChange function is firing.
function onYouTubeIframeAPIReady() {
player = new YT.Player('existing-iframe-example', {
videoId: 'cLzY3cmrgIU',
playerVars: {'autoplay': 1, 'controls': 0, 'mute' : 1, 'loop': 1 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
But the PlayerVars are not being read at all.
You may want to add the attributes to the end of that embed link as stated in this link. Example:
<iframe width="853" height="480" src="//www.youtube.com/v/lG5aSZBAuPs&autoplay=1&loop=1&playlist=lG5aSZBAuPs" frameborder="0" allowfullscreen></iframe>
Also based from this documentation regarding loop:
This parameter has limited support in the AS3 player and in IFrame embeds, which could load either the AS3 or HTML5 player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL.
Could somebody tell me how to remove youtube suggestion thumbnails on embedded video.
I am using iframe api. It feel like it should be easy. But i just can't find anything on google on how to do it.
tag.src = "https://www.youtube.com/iframe_api";
function initPLayer(playerDivId){
return new YT.Player(playerDivId, {
height: '390',
width: '640',
videoId: '4EDMR75lrKY',
events: {
'onReady': onPlayerReady1,
'onStateChange': onPlayerStateChangePlayer1
}
});
}
Thanks for help!
I knew it was obvious :P.
There is thing called player parameters.
Rel:
This parameter indicates whether the player should show related videos when playback of the initial video ends. Supported values are 0 and 1. The default value is 1.
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>
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>
I'm trying to play a youtube playlist using this JavaScript API for iframe-embeds introduced this January.
http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
Note the iframe tag below and the link which has "/p" to denote its a playlist.
<iframe src="http://www.youtube.com/embed/p/ID" width="100%" height="500" frameborder="0"></iframe>
However even in the documentation at http://code.google.com/apis/youtube/iframe_api_reference.html I'm not able to find how can I play a playlist using onYouTubePlayerAPIReady() call.
Since a proper answer was not provided here for playlists using the Playlist ID (i.e. not hardcoding the list of videos), this is the way to use it if you still wish to use the Javascript Youtube IFrame API. You can omit the videoID if the playlist ID is specified in the playerVars as follows:
function onYouTubePlayerAPIReady()
{
player = new YT.Player('player',
{
height: '390',
width: '640',
playerVars:
{
listType:'playlist',
list: '<YOURPLAYLISTID>'
}
});
}
Hope it helps who's looking for it (as I was).
I found the answer.
Just add 'playlist' to your playerVars and the playlist String|Array.
playerVars: { 'autoplay': 0, 'controls': 1,
'playlist':['your_video_id', '...']},
Like de example below:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'your_video_id',
playerVars: { 'autoplay': 0, 'controls': 1, 'playlist':['your_video_id', '...']},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
A simple solution that does not require the YouTube IFrame (JavaScript) API is discussed on
Embed YouTube Videos, Playlists and More with IFrame Embeds. You can copy the video embed code (iframe version) from one of the videos on YouTube and tweak it like this:
<iframe
width="560"
height="315"
src="http://www.youtube.com/embed?listType=playlist&list=PASTE_YOUTUBE_PLAYLIST_ID&autoplay=1"
frameborder="0"
allowfullscreen
></iframe>
Note that there is no video id... instead, the listType and list parameters instruct the player to load a playlist. For your particular requirement, add autoplay=1 to ensure that the videos play automatically without requiring JavaScript code.