I'm using YouTube's API for embedded videos. I use the exact same API code for every video on every page. But on one particular video, it loads with subtitles, but only for the first run. Hit refresh and the subtitles disappear. Clear cache and cookies and they're back.
Why is this behavior manifesting for one video, but not any of the others that share the same code?
Ok so here is the HTML tag:
<div id="youTube" data-video-id="[YouTube video ID here]"></div>
And here is the API code:
window.onYouTubeIframeAPIReady = function () {
player = new YT.Player('youTube', {
videoId: $("#youTube").data("videoId"),
playerVars: {
'rel': 0,
},
events: {
'onReady': function () {
player.unMute();
player.setVolume(35);
player.playVideo();
},
'onStateChange': function () {
if (player.getPlayerState() == 2 && !counted) {
viewCount++;
counted = true;
}
}
}
});
}
Oh, and here's a couple more bits of relevant information:
The bug is repeatable on any client, and it shows up whether deployed to server or from localhost.
I cannot get rid of subtitles using 'cc_load_policy': 0,
The subtitles do not show up on when viewing the video on YouTube.com
I don't get subtitles when I use the iframe embed code instead of the full API:
Again, I have other videos that share the same API code with no subtitle bug.
* UPDATE *
Ok, now I'm seeing this same behavior with other videos. This did not used to happen, so I'm thinking it is something on the YouTube side.
...I still would like some help looking into this, though. Here's a jsfiddle:
