I have seen this script to auto-mute video's from youtube embedded on a site:
How do I automatically play a Youtube video (IFrame API) muted?
The code is available on fiddle:
http://jsfiddle.net/9RjzU/3/
However I would like to know what to add to this code to prevent related videos appearing?
Thanks
Azzam
In your situation, all that is needed is to add 'rel': 0 to the PlayerVars parameters, like so:
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'autoplay': 1,
'controls': 1,
'autohide': 1,
'wmode': 'opaque',
'rel': 0
},
videoId: 'JW5meKfy3fY',
events: { 'onReady': onPlayerReady }
});
}
You might also be interested in the full list of parameters available for the YouTube iframe API, found here: https://developers.google.com/youtube/player_parameters#Parameters
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.
I use youtube iframe api for embedding some videos. I observe that at the end of the video, api displays some thumbnails/videos (as recommendations) for next watch.
How can I disable that? I want it to be blank or can I customize? I do something like this:
function onYouTubeIframeAPIReady() {
player = new YT.Player('player1', {
height: YTPlayerHeight,
width: YTPlayerWidth,
playerVars: { 'autoplay': 1, 'showinfo' : 0, controls: 0 },
videoId: firstVideoId,
events: {
'onReady': onReady,
'onStateChange': onPlayerStateChange
}
});
}
Pleas help
Setting rel: 0 as one of the playerVars will disable the end screen. All of the supported parameters are listed in the documentation.
Just setting parameter - related: false
With IFrame API, whether a video is played with html5 container or flash container depends on a lot of factors. I'm wondering: is it possible to set some parameter or call a function to force the player to be flash(or html5)?
besides, rel=0 seems not work in Iframe API, when I set it to 0, the related videos are still shown, is there something wrong with my code? thanks!
player = new YT.Player('player', {
height: '300', //720
width: '400', //1280
videoId: 'S2Rgr6yuuXQ',
playerVars: { 'rel': 0 }, // or rel: 0, rel: '0', all don't work
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onErrorDetected,
'onPlaybackQualityChange': onQualityChange
}
});
I think that the iframe option does not include a parameter to select html5 or flash option , because the iframe API uses the best option automatically.
you can try to specify to use HTML5 if available:
Force HTML5 youtube video
YouTube video in HTML5
and you can use the SWFObject option to use only the flash player in the client (if the client supports flash ..)
Using playerVars: { html5: 1 } loads an iframe with a html5=1 attribute in the src, similar to Force HTML5 youtube video.
Replace
playerVars: { 'rel': 0 }
with
playerVars: { 'rel': '0' }
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.