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
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 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
Trying to get a YouTube video playing on Chromecast, not using the YouTube receiver but simply the iframe YouTube api. When the receiver url is loaded in a desktop chrome browser it plays ok but when the same url is loaded onto Chromecast I get the message 'This video is currently unavailable - Learn More'. If I keep trying to get the widget, once created, to play different videos it sometimes also says 'The Adobe Flash Player is required for video playback'.
The widget is created in the onYouTubeIframeAPIReady() callback using new YT.Player as shown in the docs. Maybe I'm confused but I thought the iframe api was html5 based, not flash based. Has anyone successfully achieved this or is this unsupported on Chromecast, hence the weird behaviour? I also stumbled across this http://www.youtube.com/html5
Here's the code I'm currently using on my receiver. The message handling (both directions) is hit and miss, and I'm currently working through that ... but the loading of the iFrame library, the embedding of the video, etc. all works. If it doesn't work on your end, we can start to investigate how your setup might be different. I've tried to add comments where it might be helpful.
<html>
<head>
<script src="https://www.gstatic.com/cast/js/receiver/1.0/cast_receiver.js">
</script>
<script type="text/javascript">
// first create our receiver object and our channel handler
var receiver = new cast.receiver.Receiver('{YOUR_APP_ID}', ['ChromecastYoutube'],"",5);
var ytChannelHandler = new cast.receiver.ChannelHandler('ChromecastYoutube'); // 'using 'ChromecastYoutube' as my dev namespace. Wouldn't really be that in production.
ytChannelHandler.addChannelFactory(receiver.createChannelFactory('ChromecastYoutube'));
ytChannelHandler.addEventListener(
cast.receiver.Channel.EventType.MESSAGE,
onMessage.bind(this)
);
receiver.start();
window.addEventListener('load', function() { // we won't try to load the iframe libraries until the chromecast window is fully loaded.
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: '562',
width: '1000',
videoId: 'jLlSqucqXB0',
playerVars: { 'autoplay': 0, 'controls': 0 },
events: {
'onReady': onPlayerReady,
'onPlayerStateChange': onStateChange
}
});
}
function onPlayerReady(event) {
document.getElementById('annotation').innerHTML="We're ready to go";
}
function onStateChange(event) {
switch (event.data) {
case YT.PlayerState.ENDED:
// TODO let sender know we're done, then close casting
break;
case YT.PlayerState.PLAYING:
// TODO let sender know we're playing
break;
case YT.PlayerState.PAUSED:
// TODO let sender know we're paused
break;
}
}
function onMessage(event) { // currently, any one of these will work, but subsequent ones seem to falter. Investigating...
ytBindings={"playVideo":player.playVideo(),"pauseVideo":player.pauseVideo(),"stopVideo":player.stopVideo(),"getStatus":player.getPlayerState()}
ytBindings[event.message];
}
</script>
<style>
#wrapper {
width: 1000px;
margin: 10px auto;
text-align: center;
}
#annotation {
color: #ffffcc;
font-size: 200%;
margin-top:25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="player"></div>
<div id="annotation"></div>
</div>
</body>
</html>
Current behavior: it now seems to be fixed with Chromecast firmware 16041 and if the country code is set correctly during Chromecast setup. See the latest comment here https://code.google.com/p/gdata-issues/issues/detail?id=5923
Old answer:
Here is the root cause of the issue: https://support.google.com/chromecast/answer/2995235?hl=en
Some videos may not play using Chromecast. Private videos, live content, and videos not approved for mobile playback will not work with Chromecast.
Hopefully this will change, kills a primary Chromecast use case.
I also ran into this issue and found the cause to be the fact that I was using html5 audio to play some sound effects just before the video began. Removing the sound effects made the youtube player work again.
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
Everything works great in chrome and ff. i have the code, and some function to stop the video on slide change (i have 4 videos on the page)
i have tried div with id and calling
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var video1;
function onYouTubePlayerAPIReady() {
video1 = new YT.Player('video1', {
width: videoWidth,
height: videoHeight,
videoId: '**VIDEOID**'
});
}
and i have tried having the Iframe in the source and than calling only
video1 = new YT.Player('video1');
within the onyoutubeplaterapiready
the error i get only on IE (i tested it on 8) is:
Message: Unspecified error.
Line: 49
Char: 5
Code: 0
URI: http://www.youtube.com/embed/VIDEOID?enablejsapi=1&origin=http://o
what can be done with that?
I know that I'm late with this but I had the same error, I was loading the YouTube player inside a modal and when I closed the modal I got the error on IE8. The thing was that I had registered "onStateChange" event in the API and when the modal was closed, and the player removed from the DOM, I got that error because that event was trying to communicate with an element that doesn't exist any more.