I'm having problems with using Youtube iframe API with the latest stable version of Chrome (version 85). I know everything used to work a month ago, but now, even following exactly the most basic example found in the Youtube iframe API docs:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
does not work anymore. onReady and onStateChange events arent getting triggerd, and the "player" object is missing most of its functions, for example player.playVideo() is undefined. The problem doesnt occur on any other browser I tested it with, it also only occurs if I'm logged in to my Youtube account while testing this.
I suspect the origin of the problem are the cookies sent with requests from Youtube, as I get this error in the console in the "Issues found" tab:
"Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute"
, while Chrome in version 85 notes mentioned this:
"Rejection of insecure SameSite=None cookies"
It would match the fact that the player works if I'm logged out of Youtube, as Youtube uses these cookies to suggest different videos based on your profile.
I am looking for a workaround at the moment, only thing I could find was that if I created the iframe manually, instead of using the API, I could put "youtube-nocookie" instead of "youtube" in the src of the iframe, but that way I don't have an object I could refer to in order to control the player, for example if I had to create a custom button to pause/play the video. I guess it's mostly on Youtube to fix their API, but is there some way to work around this for now?
Here's a Codepen to illustrate the problem, the code was taken from the Youtube Iframe API docs linked above:
https://codepen.io/Gabielovv/pen/VwadJvg?editors=1111
// 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) {
console.log("onPlayerReady");
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) {
console.log("onPlayerStateChange");
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function playYtVideo() {
console.log("playYtVideo");
player.playVideo();
}
