Since my Youtube API code did not work i´ve decided to start from the beginning and tried the example code from https://developers.google.com/youtube/iframe_api_reference?hl=de
So i just embedded the player which should pause after 6 seconds.. This is an excerpt of the example player code
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
It is working in firefox,chrome and safari, but not in Internet Explorer (my version is 11). The autoplay doesn´t work, as well as the pausing after 6 seconds. So i guess onready and onstatechange isn´t working.. I thought the api should work IE7+ Is there a solution yet? Thank you
edit: It is working fine with IE10 by the way
I was able to reproduce in http://jsfiddle.net/77PJB/3/.
function onPlayerReady(event) {
event.target.playVideo();
}
I filed this internally. You can file it in public issue tracker if it's not filed already, to be notified once it's fixed.
I ran into this same issue where YouTube Player API events would not fire on IE.
I fixed it by loading the source over SSL.
Before (Worked in Chrome, FF, Safari... NOT IE 10/11)
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
After (Works in IE10+)
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
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 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
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!
Let me explain my scenario. I want to use Youtube IFrame API to embed some videos on my website.
I tested the video with id wdGZBRAwW74 (https://www.youtube.com/watch?v=wdGZBRAwW74) on this page: Youtube IFrame Player Demo. And it works OK.
I try this example code:
<!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 = "//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: 'wdGZBRAwW74',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
// 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 onPlayerError(event){
console.log(event.data);
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
with some virtual host domains on my localhost and i got result:
with domain app.centaur.com/youtube/index.htm: IFrame API work OK, the video play without problems.
with domain app.music.com/youtube/index.html: IFrame API work OK, but the video can not play, API fires onError with error 150 and the embedded player show message "This video contains content from VEVO, who has blocked it from display on this website. Watch on Youtube"
with domain app.musiccentaur.com/youtube/index.htm: like first case, everything work ok
with domain app.centaurmusic.com/youtube/: like first case, everything work ok
As i know error 150 stand for "The owner of the requested video does not allow it to be played in embedded players". But i see it still work in case 1, 3, 4, so what is it mean ?
Seem all of videos by Vevo related to this problems. I'm not sure if Vevo defined some policy for embedding their videos.
Maybe the problem come from my domain music.com, but i'm not sure there is some rules of domain to embed Vevo's video on websites.
What if i buy a domain for my website then i got error 150, this is so bad. :(
Is there anyone deal with this before? Please give me some solutions. Thanks in advance.
Note: this error only occurs on Vevo's videos.
Content owners are allowed to set up a white/black list of domain names on which embedding is allowed/denied. There is no way to work around these restriction.
This blog post has a bit more info about content restrictions in general: http://apiblog.youtube.com/2011/12/understanding-playback-restrictions.html