CODEWITHSUNDEEP
javascriptapivideoyoutubeyoutube-iframe-api
aryazar86
aryazar86

Reputation: 71

Youtube API embed suddenly stopped functioning

I've been using YouTube's IFrame API for a little over a month now for a website I made off of NationBuilder. I needed it because I needed its onPlayerStateChange to hide and show some elements I placed overtop of the video itself.

Suddenly, it's stopped working. I did a little research and found that YouTube is moving to version 3 of their Data API this month, so am thinking this might be the problem. Am not sure.

Here's the site itself, the video is the big one at the top with the two elements over top of it: http://www.beyondbars.org/

(NOTE: the video up on the site right now is working because I just put the regular iframe embed in -- you can see that once it starts, the two elements over top of it don't hide like I want them to)

I also did research online and on stackoverflow, but no one else seems to be having this problem.

I even went so far as to copy and paste verbatim the example script that YouTube placed on its tutorial site: https://developers.google.com/youtube/iframe_api_reference#Requirements, and still, it's not working. Interestingly, in this case, I hear the sound from the video, just can't see the actual video itself.

In the iFrame generated, this is what is showing up now:

<div id="player-unavailable" class="ytp-error hid">
<div id="unavailable-submessage" class="ytp-error-content"></div>
</div>

In the console, I've started to get this message, but am not sure if it's related to the YouTube issue:

Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains. ping?client_id=126739610711965&domain=www.beyondbars.org&origin=1&redirect_uri=http%3A%2F%2Fstatic.…:1

Here is the code that I actually need, and that was working before: 

<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);

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '{{ youtubeid }}',
          playerVars: { 'wmode': 'opaque', 'controls': 0, 'showinfo': 0 },
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // when video starts, hide the headline wrap
    function onPlayerStateChange(event) {        
        if(event.data === 1) {            
            $('.headline-wrap').fadeOut('slow');
        }

        if(event.data === 0) {
            $('.headline-wrap').fadeIn('slow');
        }
    }

</script>

Anyone have ideas? Is this something I've done wrong? Or is this on YouTube's end?

Thanks!

Upvotes: 3

Views: 1740

Answers (2)

RHB
RHB

Reputation: 102

I had the same problem. This solution works for me:

var videoQualities = [
    'small', // ~ 320 x 240
    'medium', // ~ 640 x 360
    'large', // ~ 853 x 480
    'hd720', // HD Ready
    'hd1080', // Full HD
    'highres' // ~ 4K
];
var time = player.getCurrentTime();

player.seekTo(time + 1, true);

var currentQuality = player.getPlaybackQuality();
var index = videoQualities.indexOf(currentQuality);
var newQuality = videoQualities[index - 1] || 'medium';

player.setPlaybackQuality(newQuality);

setTimeout(function() {
    player.setPlaybackQuality('default');
}, 1000);

Upvotes: 0

cajund
cajund

Reputation: 141

I am experiencing the same problem, but I have it isolated to Safari (OSX and iOS). Also affected an Andriod browser. It's working on Chrome and Firefox.

Upvotes: 1

Related Questions