Some options to YouTube api embedded player not being respected

StackOverflow https://stackoverflow.com/questions/23443476

  •  14-07-2023
  •  | 
  •  

Question

I'm having trouble getting the YouTube api to respect some of the parameters I'm passing to it. The specific options I'm interested in are "controls", "modestbranding" and "start", but there are others as well. I've got a sample page live here: http://designdeploy.co.uk/yt.html

The full HTML:

<html>
<head>
</head>
<body>
<div id="myytplayer"></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 ytplayer;
window.onYouTubePlayerAPIReady = function() {
    ytplayer = new YT.Player('myytplayer', {
        height: 600,
        width: 800,
        enablejsapi: 1,
        origin: 'http://designdeploy.co.uk',
        modestbranding: 1,
        controls: 0,
        start: 403,
        fs: 0,
        showinfo: 0,
        videoId: '6KRJr7k6xns'
    });
}

</script>
</body>
</html>

As you can see, it still starts at the beginning of the video, instead of 403 seconds in, and still shows all branding.

Was it helpful?

Solution

Generally speaking, the options you're trying to set are not direct attributes of the constructor argument, but are children of the playerVars attribute, like this:

<html>
<head>
</head>
<body>
<div id="myytplayer"></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 ytplayer;
window.onYouTubePlayerAPIReady = function() {
    ytplayer = new YT.Player('myytplayer', {
        height: 600,
        width: 800,
        playerVars: {
           origin: 'http://designdeploy.co.uk',
           modestbranding: 1,
           controls: 0,
           start: 403,
           fs: 0,
           showinfo: 0
        },
        videoId: '6KRJr7k6xns'
    });
}

</script>
</body>
</html>

Here's a fiddle to demonstrate.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top