I put a video player using the latest iFrame API from YouTube inside a website, however when I click a suggested video, instead of reusing the same player, it opens YouTube instead.
I didn't find any options to not make it go to YouTube each time, is there any?.
I used iframe API of youtube last month. I sometimes faced the same issue. But the issue was resolved by creating a iframe from the javascript. Please follow the below steps. I hope this will solve your problem.
Place a tag in your web page and write a javascript as shown below:
1 . Add a div element with id = "player" in your webpage.
<div id="player"></div>
In the Javascript part:
2. Add a script to load iframe player API
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.. Create an iframe.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '320', //You can change height and width as needed
width: '480',
videoId: [video ID you want to load],
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
'onPlaybackRateChange': onPlayerPlaybackRateChange,
'onError': onPlayerError,
'onApiChange': onPlayerApiChange,
}
});
}
You can handle events by using the below functions.
function onPlayerStateChange(event){};
function onPlayerReady(event){};
function onPlayerPlaybackQualityChange(playbackQuality){};
function onPlayerPlaybackRateChange(playbackRate){};
function onPlayerError(e){};
function onPlayerApiChange(){};
Reference: https://developers.google.com/youtube/iframe_api_reference
Related
This wasn't a problem for me until a few months ago. I thought YouTube had changed something in their API for Iframe Embeds, as they often do, but for this particular case, I am not sure.
I use the following code as suggested by the docs but my problem comes when I try to add a custom playlist using selected IDs.
<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: {
'playsinline': 1,
'playlist': '$playlist'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
</script>
The iframe loads and plays the videos in some cases but will fail most of the time displaying the message "This video is unavailable".
Forexample, loading a playlist of songs from Imagine Dragon :
fKopy74weus,izhxTx4LVWo,rGlEZpOVjGo,7wtfhZwyrcc,1nv9br7P7g0,dvPfgVGFu6k,1SrEE6zwnW8,LeaydhTew3U,dvuxxVKZ1eQ,It_Ae6XSPzw,f242R8si7qU,z0a9k1gSMsw,trig1MiEo1s,U5x96y4mApI
will not work, but if I load songs from say, Olivia Rodrigo:
hM2U8cb8lhI,6tsu2oeZJgo,ZmDBbnmKpqQ,w-HfMiue7-k,cii6ruuycQA,gNi_6U5Pm_o,AqRXiQkyxvI,ZQFmRXgeR-s,Z-9gQjUZMm0,AyX_LL9nWSE,ZLlsmB1D4Q0
the player will load and play all the videos just fine.
However, If I load a single video from either artist, it will play without any problems.
What could be the issue here?
Thanks.
I am having a very frustrating experience trying to get videos to loop consistently using a basic iframe. I am not interacting with the API via code. I simply have an iframe with autoplay=1,mute=1,loop=1. I've tried using stand-alone videos and I've tried playlists (with list=[ID],listType=playlist) and I keep running into the same problem. Sometimes the player will loop the video and sometimes it will not. Every time I think I have it figured out and I'm ready to deploy the app, I test it again and the video fails to loop.
Windows 10
Chrome 71.0.3578.98
Angular 6.0.3
You can choose any of these options:
Check my answer where I described how you can set your URL for create a playlist (using a single videoId) and simulate a loop.
Use the YouTube iframe Player API for set your video and (once the video ended), call the playVideo() function for play the current video = hence, creating a loop.
This is the code: - unfortunately, you can't see it working here, but, you can see the working jsfiddle1
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Variables of the divs (where the YouTube iframe will load):
var player;
function onYouTubeIframeAPIReady() {
// Div player:
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'xPCZEoGJi_4',
playerVars: {
'autoplay': 1,
'loop': 1,
'mute': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
// When the video ends, it will play again.
// See: https://developers.google.com/youtube/iframe_api_reference?hl=en#Events
if (event.data == YT.PlayerState.ENDED) {
player.playVideo();
}
}
// Div "player" - The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="player"></div>
1 If the video (once has loaded) hasn't play, you have to play manually the video - this is due some kind of restrictions that jsfiddle has.
I'm using iframe api (https://developers.google.com/youtube/iframe_api_reference)
I want to be able to pause/play and mute/unmute video through iframe api.
I've created a sample:
http://jsfiddle.net/ke73v0ov/
<iframe id="bg" src="//www.youtube.com/embed/o3z6h0EaIN0?&version=3&enablejsapi=1&autoplay=1&rel=0&autohide=1&controls=0&fs=0&iv_load_policy=3&loop=1&modestbranding=1&showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
<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);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('bg', {
events: {
'onReady': function (event) {
event.target.setVolume(50);
}
}
});
}
function pauseVideo() {
player.pauseVideo();
}
function playVideo() {
player.playVideo();
}
</script>
Pause
Play
It works in Firefox and Chrome, but it doesn't in Internet Explorer (I've tested in IE11).
It says
Object doesn't support property or method 'pauseVideo'
(You can see error in Developer tools).
Please help.
Thank you.
So, I posted the same thing to Google.
It works now.
I'm still not sure if it was my computer or they did something.
When embedding a Youtube playlist I am getting this error:
Blocked a frame with origin "http://www.youtube.com" from accessing a frame with origin "http://www.mydomain.com". Protocols, domains, and ports must match.
I am not mixing HTTP with HTTPS anywhere, so I don't know why I am getting this error in the first place.
I have noticed that recently the Youtube embedded playlist is not displaying the embed image of the first video and just displaying a black screen with a 'Play All' button, and I am wondering if this is being caused by the above error.
Apparently it seems that the error given by chrome is a bug. In order to solve the black screen with 'Play All' button issue I used the Javascript API (instead of the iframe), like this:
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<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: '',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.cuePlaylist({'listType':'playlist','list':'PLE2714DC8F2BA092D'});
}
</script>
</body>
</html>
Thanks to #jlmcdonald for the answer, as indicated here: Youtube embedded playlist diplays playall button instead of the first video
this issue is quite apparent to the Youtube service, basically Youtube can be only accessed through https, http is not allowed now, just change your 'http' to "https"...that's the solution
We are embedding a youtube player into our page. Easy implementation of code and html5 support driven us to use the youtube iframe player.
Problem is that view count does not work with the api. No video does not autoplay and we are playing the video with youtube's default play button.
When I revert back to a AS3 player view count seems to work.
Is it a bug in the iframe api?
Anyone come across a solve?
Thanks!!!
Views that originate as a result of clicking on one of the native player UI elements (either the play button in the control bar or on the static player image) will normally count towards incrementing the views for a video. There are obviously other signals that could come into play, but all things being equal, there's no reason why using an <iframe> embed vs. an ActionScript 3 embed should prevent views from being counted.
If you have a specific example of your implementation that you want to pass along, I can take a look and see if you're doing anything unorthodox.
we have created a simple test html file with a video using the YouTube iFrame API, as the idea is to have the videoplayer fall back to the HTML5 videoplayer on mobile devices. However views are not being counted on click to play video:
http://www.youtube.com/watch?v=-LHUt9FGgys
In the body of the html we have the following:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "//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: '-LHUt9FGgys',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
//event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
// if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
// done = true;
// }
}
function stopVideo() {
player.stopVideo();
}
</script>
It would be interesting to see if you or someone else has a solution for this. Thanks!