Youtube iframe API не может отправить сообщение

Question

На какое-то время фрагмент javascript, который я написал, который прослушивает действия youtube на определенной странице, работал чудесно. Я использую iframe jt api ioutube: https://developers.google.com/youtube/iframe_api_reference. Но одно недавнее добавление контента, конкретное видео на YouTube, отслеживание не будет работать. События не срабатывают вообще.

В консоли, я заметил эту ошибку после сообщения: Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

Так ничего с моим собственным кодом не помогло. Некоторые вопросы здесь, в stackoverflow, предположили, что это проблема с запуском new YT.player слишком рано, поэтому я попробовал целую кучу вещей, таких как загрузка файла yt js api на загрузку window и только применить api после, но это не показалось хорошо.

Answer 1

Мне потребовался более часа, но ответ был прямо передо мной. Это на самом деле довольно понятно: Вы не можете использовать js api для youtube для отслеживания видео iframe без www. Я не знаю, почему, это, конечно, не говорит об этом в их документации.

Я проверил это несколько раз и подтвердил, как сейчас, отслеживание IFRAME с источником www.youtube.com/embed/0GN2kpBoFs4 будет работать великолепно, отслеживая youtube.com/embed/0GN2kpBoFs4 выброшу:

Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.

Запутанная частью, конечно, является то, что как загрузка видео и воспроизведение в порядке. Это только API, который работает неправильно.

скрипку - http://jsfiddle.net/8tkgW/ (Проверено на хром/горный лев)

Btw, в то время написания этого ответа я наткнулся на YouTube iframe API: how do I control a iframe player that's already in the HTML? - обратите внимание на скрипке этого парня. Он написал свою собственную реализацию iframe для youtube (ничего себе!). Если вы измените адрес источника iframe в скрипте на один без www, он будет работать. Это означает, что youtube пишет bad js. Плохо плохо плохо!

Answer 2

Я знаю, что этот пост 3-х лет, но и для тех, кто все еще ищет ответ на вопрос:

Добавьте этот сценарий и все работает отлично:

<script src="https://www.youtube.com/iframe_api"></script> 

У меня была такая же проблема с jwplayer и исправил его с помощью этого скрипта.

Answer 3

Не забудьте добавить его в белый список:

<!-- Add the whitelist plugin --> 
<plugin name="cordova-plugin-whitelist" source="npm" spec="*"/> 

<!-- White list https access to Youtube --> 
<allow-navigation href="https://*youtube.com/*"/> 

Answer 4

Документация по API YouTube рекомендуем загрузить апи как этот

var tag = document.createElement('script'); 
tag.src = "http://youtube.com/iframe_api"; 
tag.id = "youtubeScript"; 
var firstScriptTag = document.getElementsByTagName('script')[1]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

Но получаю эту ошибку:

Невозможно для сообщения http://youtube.com.Получатель имеет происхождения http://www.youtube.com

Вот лучшее решение I found from this site

Так добавить это первый в верхней части перед вызовом Апи

if (!window['YT']) {var YT = {loading: 0,loaded: 0};} 
if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};} 
if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} 
else 
{l.push(f);}}; 
window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}}; 
YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}}; 
var a = document.createElement('script'); 
a.type = 'text/javascript'; 
a.id = 'www-widgetapi-script'; 
a.src = 'https:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vflumC9r0/www-widgetapi.js'; 
a.async = true; 
var b = document.getElementsByTagName('script')[0]; 
b.parentNode.insertBefore(a, b);})();} 

// =========== ТОГДА ======================================

function onYouTubeIframeAPIReady() {// do stuff here}