Youtube player controls & autohide not working - youtube-api

So I added the youtube iframe api to my website and followed the instructions; so this is my code:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
controls: '0',
autohide: '1',
videoId: 'I'd rather not display that',
events: {
// 'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Setting controls to 0 should not display the player's controls as per this article but it's still showing;
Also setting the autohide to 1 should have the progress bar and controls slide out after a couple of seconds as per this article but that also doesn't work.
Am I doing something wrong?

I got the embed version and the iframe version both autoplaying, autohide (don't really need) and hiding controls. I used the sample code and added in the parameters you needed.
All you need to do is replace your movie id and I think you will be up and running.
Here is the jsfiddle links where you can see it work and grab the code.
Embeded version: http://jsfiddle.net/franktudor/jk9SS/
<object width="640" height="390">
<param name="movie"
value="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="640" height="390"></embed>
</object>
Here is the iFrame version: http://jsfiddle.net/franktudor/2wh8T/
<iframe id="ytplayer"
type="text/html"
width="640"
height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&autohide=1&controls=0"
frameborder="0"/>
Both are options you can use. You are working with the iFrame version...I also recommend that version. But in the event you need another solution the embed version can be used.
Its not that script style but you can use a wrapper if needed.
Here is a link to an HTML5 youtube (and vimeo) video wrapper.
Ok, here is the functional code like your example that I got working: http://jsfiddle.net/franktudor/DU57E/
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 1, 'controls': 0 }, //this is what you need...
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>

Just set the variables inside the propertie 'playerVars'.

Related

Youtube API; shuffle playlist?

So for some time now I am trying to make a proper shuffle script, using the youtube api, in order to play my youtube playlist.
I've found a lot of examples, but none of them seem to be working very well. Some do shuffle the list but not the first song being played, and some do the precise opposite.
What I would like is to shuffle the full playlist and then start playing. So the first played song should be random and the next one played should be random/shuffled as well.
Ive found the script below to shuffle the playlist. However the first song played is not shuffled. Can someone help me out with this?
Thanks a million!
<html>
<body>
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubeIframeAPIReady() {
var player = new YT.Player("player", {
height: '390',
width: '640',
events: {
'onReady': function (event) {
event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
event.target.playVideo();
setTimeout(function() {
event.target.setShuffle({'shufflePlaylist' : true});
}, 1000);
}
}
});
}
</script>
</body>
</html>
This worked for me!
<html>
<body>
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubeIframeAPIReady() {
var numPl = Math.floor((Math.random() * 50) + 1);
var player = new YT.Player("player", {
height: '390',
width: '640',
playerVars: {
listType:'playlist',
list:'PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT',
index: numPl,
autoplay: 1,
},
events: {
'onReady': function (event) {
//event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
//event.target.playVideo();
setTimeout(function() {
event.target.setShuffle({'shufflePlaylist' : true});
}, 1000);
}
}
});
}
</script>
</body>
</html>
This works using youtube api. and users youtube created play list . shuffles the play list into new order every time page is refreshes
Load YT-player API.
Load YT-playlist user playlist id "**.youtube.com/playlist?list=PLo16_*******"
To Shuffle playlist use > player.setShuffle(true);
To Start YT-player at video 1 in shuffled playlist use > player.playVideoAt(0)
working demo Responsive shuffled YouTube Playlist on Google sites
code jsfiddle.net
<!DOCTYPE html>
<html>
<!-- Responsive YouTube shuffled playlist player -->
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag.
style = replaces size in the player script makes it responsive -->
<div style=" top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
id='player'>
</div>
</body>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: {
autoplay: 0,
loop: 1,
controls: 1,
showinfo: 1,
frameborder: 1,
'listType': 'playlist',
'list': "PLo16_DLriHp4A8BvkJFZfO_4KDVv7yGgy", // your YouTube playlist id here
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
// first shuffle play list
player.setShuffle(true);
// Onload and on refresh shuffles the users YT playlist but always starts playing
// the first video in the original list at its new index position
//ie. video (1) = video( new shuffled pos ?)
// to get over this we can start the player at the new shuffled playlist
//video 1(index=0) this changes every time it's refreshed
player.playVideoAt(0)
}
// 5. The API calls this function when the player's state changes.
// option to to add bits
function onPlayerStateChange(event) {
const player = event.target;
}
</script>
</html>

how to stop the youtube video playing in Ionic App

I am using IFrame for playing youtube video. It works fine but I want to stop it on button click. How to do it. Please help.
<div class="padding-css">
<iframe ng-model="myframe" class="frameclass" src="https://www.youtube.com/embed/CR5zjazP3hg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
Solution for Ionic2
ionViewWillLeave() {
let listaFrames = document.getElementsByTagName("iframe");
for (var index = 0; index < listaFrames.length; index++) {
let iframe = listaFrames[index].contentWindow;
iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
}
Don't forget to enable JS at the end of the video link *?enablejsapi=1
You can create iframe through java script and control player through buttons as stop.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
For more details you can go through this link.
https://developers.google.com/youtube/iframe_api_reference#Getting_Started

embed and loop just a part of a youtube video (html5)

Is there a way to loop just a part of a YouTube video with the HTML5 player? I tried this code (start 7 sec, end 12sec)
The first "loop" shows the part I want, second and other loops shows the whole video.
It is working in Flash but I have issues in HTML 5 for mobile devices.
Here is my embed code:
<iframe allowfullscreen="" frameborder="0" width="960" height="720" src="http://www.youtube.com/embed/Bpu0TIXzI1w?version=3&start=7&end=12&autohide=1&hl=en_US&rel=0&loop=0&modestbranding=1&playlist=Bpu0TIXzI1w"></iframe>
You may need to use the Javascript API. It's a bit more complex, but you have full control over the video playback.
Documentation: https://developers.google.com/youtube/iframe_api_reference
Working example: http://jsfiddle.net/pbosakov/Lo6gwtff/
Code:
<div id="player"></div>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'Bpu0TIXzI1w',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
loopStart();
player.playVideo();
}
function loopStart() {
player.seekTo(7); // Start at 7 seconds
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
setTimeout(loopStart, 5000); // After 5 seconds, restart the loop
}
}
</script>

How to detect youtube player finish playing

Hi I am trying to track/detect the youtube player finish video so i can redirect page into a new url. i found code somewhere but problem is that its not working in IE, have a look into my code
http://jsfiddle.net/yhb9yf21/
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '7oGgzGPK1SY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('done');
}
}
</script>
its not working with IE???

youtube ie menu fix

i have the following code
<script>
window.onload = function(){
var a = document.getElementsByTagName("a");
for(var i=0; i<a.length; i++){
if(!/#ytplayer/.test(a[i].href)) continue;
var link = a[i].innerHTML.match(/\/vi\/([^\/]+)/);
if(link) (function(vidId){
a[i].onclick = function(){
player.loadVideoById(vidId);
}
})(link[1]);
}
}
// 2. This code loads 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);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '853',
videoId: '963puDdR0bY',
wmode: 'transparent',
rel: '0',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 60000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
<script>
$(document).ready(function() {
$.ajax({
type: "POST",
url: "/publicPortal/restservices/tracking/click",
data: { docId: "enPubIntentionalInvesting", docType: "tvSpots" },
contentType: "text/plain"
});
});
</script>
and im calling the images here
<div id="player" style="padding-left:40px; z-index:-1;"></div>
</div>
<div id="nav" style="height:200px; padding-top:20px; padding-left:40px !important;">
<a href="#ytplayer" >
<img src="image.png" id="vid1" class="vidThumb" rel="http://www.youtube.com/watch?v=963puDdR0bY" />
<img style="display:none;" src="http://img.youtube.com/vi/963puDdR0bY/default.jpg" /></a>
<a href="#ytplayer" >
<img src="image.png" id="vid1" class="vidThumb" rel="http://www.youtube.com/watch?v=963puDdR0bY" />
<img style="display:none;" src="http://img.youtube.com/vi/963puDdR0bY/default.jpg" /></a>
<a href="#ytplayer" >
<img src="image.png" id="vid1" class="vidThumb" rel="http://www.youtube.com/watch?v=963puDdR0bY" />
<img style="display:none;" src="http://img.youtube.com/vi/963puDdR0bY/default.jpg" /></a>
</div>
you may notice i have two images there, but it seems the code needs to pull from you tube, but i wanted a custom image.
My issue is in ie the menu area goes UNDER the youtube player, ive looked around for fixes, but most are geared towards separate iframes.
ive tried adding wmode into the api call but its doesnt seem to be working! any help would be great!
so i figured it out!
you need to add playerVars to the function, like so;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '853',
videoId: '5hewAwxIy9k',
playerVars: {
controls: 1,
showinfo: 0 ,
modestbranding: 0,
rel: 0,
wmode: "opaque"
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

Resources