Search code examples
youtube-iframe-api

Youtube IFrame API - Start time not working when Youtube History is enabled


When a user is signed-in at youtube with Youtube History enabled, the start time will not work.

Somehow, youtube will go to the last save time in history after the video is played.

Steps to reproduce

  1. sign-in to youtube.com
  2. go to accounts.google.com > data & privacy > youtube history (turn on)
  3. run the attached HTML script
  4. set the time to around 2minutes, then play a few seconds
  5. press ctrl+shift+R to refresh the page

Expected Result:

  • should play start time at 25minutes

Actual Result:

  • will play to 2minutes (or last played time in history)
<html>
<script src="https://www.youtube.com/iframe_api" type="application/javascript"></script>
<script>

    let player;
    function onYouTubeIframeAPIReady() {
        console.log('ready')
        player = new YT.Player('player', {
            sandbox: true,
            height: '390',
            width: '640',
            videoId: 'T9oT-oOaTNU',
            playerVars: {
                'playsinline': 1,
                'autoplay': 0,
                'start': 1500
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });

        player.seekTo = (n) => {
            console.log({ n });
        }
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        //event.target.playVideo();
    }

    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    let done = false;
    function onPlayerStateChange(event) {
    }
    function stopVideo() {
        player.stopVideo();
    }
</script>

<body>
    <div class="responsive-embed widescreen">
        <div class="embed video-player">
            <div id="player"></div>
        </div>
    </div>
</body>

</html>

Solution

  • I solved this on my site by changing the IFrame domain to www.youtube-nocookie.com instead of www.youtube.com :

    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VIDEO_ID?fs=1&start=START_TIME&end=END_TIME" frameborder="0" allowfullscreen></iframe>
    

    Change the VIDEO_ID with your video ID, START_TIME with your desired start time, and END_TIME with the end time or in my case same with the start time.


    Some background story:  I suddenly got this trouble on my site last month where it didn't happen previously.

    I tried to file a bug to Google here, but they said they cannot reproduce it and stated it seemed like a browser issue, which match this archaic post from 2015