Question

105

Youtube Blocked a frame with origin http://www.youtube.com from accessing a frame with origin even if the same protocol is used

rated 0 times [ 112] [ 7] / answers: 1 / hits: 19734 / 11 Years ago, fri, july 26, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bobbidayanam

Add To Favorites

Follow

Total Points: 82

Total Questions: 99

Total Answers: 96

Location: Venezuela

Member since Sat, Apr 24, 2021

3 Years ago

bobbidayanam questions

1 How to submit the simple log with AWS CloudWatch Logs from frontend?

Wed, Sep 23, 20, 00:00, 4 Years ago

1 React use debounce with setState

Sat, Mar 21, 20, 00:00, 4 Years ago

1 How to get the length of every word in a string

Mon, Dec 24, 18, 00:00, 6 Years ago

1 Unable to resolve module 'expo-font.js'

Fri, Nov 16, 18, 00:00, 6 Years ago

1 Angular 6 and Angular Material - mat-radio-group [(ngModel)] set dynamic variable inside *ngFor

Thu, Sep 27, 18, 00:00, 6 Years ago

View All

answered 11 Years ago cristian · Accepted Answer

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