Question:

What causes the reload of embeded YouTube videos on third-party websites?

I am curious about the technical reason behind the reload of embeded YouTube videos on websites other than YouTube. For example, when I watch a video on wimp.com, it initially loads and plays, but then it shows the thumbnail with the play button again, and I have to click it to resume the video from the start. What is the mechanism behind this behavior?

Answer:

What causes the reload of embeded YouTube videos on third-party websites?

If you have ever watched a YouTube video embeded on a website that is not YouTube, you may have noticed that sometimes the video seems to reload after a few seconds of playing. This can be annoying, especially if you have to click the play button again and watch the video from the beginning. But why does this happen? What is the technical reason behind this behavior?

The answer lies in the way YouTube embeds videos on third-party websites. YouTube uses an [iframe API](https://developers.google.com/youtube/iframe_api_reference) to allow web developers to control the YouTube player using JavaScript. An iframe is a HTML element that allows embedding another web page within a web page. The YouTube iframe API creates an iframe that contains the YouTube player, and then exposes a set of methods and events that can be used to interact with the player.

One of the methods that the YouTube iframe API provides is `loadVideoById`, which loads and plays a specified video. This method can be used to dynamically change the video that is playing in the iframe, without reloading the whole iframe. However, this method also has a side effect: it resets the player state and the playback quality. This means that if the video was already playing, it will stop and start again from the beginning, and if the video had a higher or lower quality than the default, it will change back to the default.

The reload trigger

So, what triggers the `loadVideoById` method to be called? There are several possible scenarios, but one of the most common ones is when the web developer wants to track the video views using Google Analytics. Google Analytics is a web analytics service that allows web developers to measure and analyze the traffic and behavior of their website visitors. One of the features that Google Analytics offers is the ability to track events, which are user interactions with the website elements, such as clicks, downloads, or video plays.

To track the video plays using Google Analytics, the web developer has to add some code that listens to the YouTube player events, such as `onReady`, `onStateChange`, or `onError`. These events are fired by the YouTube iframe API when the player changes its state, such as when it is ready, when it starts or stops playing, or when it encounters an error. The web developer can then use these events to send custom events to Google Analytics, using the `ga` function.

However, there is a catch. The YouTube player events are not fired when the video is loaded by the iframe API itself, but only when the user interacts with the player. This means that if the user clicks the play button on the embeded video, the `onStateChange` event will fire, and the web developer can send a custom event to Google Analytics. But if the video starts playing automatically, or if the web developer calls the `loadVideoById` method programmatically, the `onStateChange` event will not fire, and the web developer will not be able to track the video play.

To solve this problem, some web developers use a workaround: they call the `loadVideoById` method after the video is loaded by the iframe API, and then listen to the `onReady` event to send a custom event to Google Analytics. This way, they can ensure that every video play is tracked, regardless of how the video is loaded. However, this workaround also causes the reload of the video, as explained before.

An example

To illustrate this scenario, let’s look at an example of a website that embeds YouTube videos using the iframe API and tracks the video plays using Google Analytics. The website is [wimp.com](https://wimp.com/), a popular website that features viral videos from various sources. Here is a snippet of the code that wimp.com uses to embed and track YouTube videos:

“`javascript // Create the YouTube player

var player = new YT.Player(‘player’, {

height: ‘390’, width: ‘640’, videoId: ‘M7lc1UVf-VE’, // The ID of the YouTube video events: { ‘onReady’: onPlayerReady, // The function to execute when the player is ready ‘onStateChange’: onPlayerStateChange // The function to execute when the player state changes } }); // The function to execute when the player is ready

function onPlayerReady(event) {

// Load the video by ID player.loadVideoById(‘M7lc1UVf-VE’); // Send a custom event to Google Analytics ga(‘send’, ‘event’, ‘Videos’, ‘Play’, ‘YouTube’); } // The function to execute when the player state changes

function onPlayerStateChange(event) {

// If the player state is playing if (event.data == YT.PlayerState.PLAYING) { // Send a custom event to Google Analytics ga(‘send’, ‘event’, ‘Videos’, ‘Play’, ‘YouTube’); } } “`

As you can see, the code creates a YouTube player using the iframe API, and passes the ID of the YouTube video as a parameter. Then, it defines two functions to handle the player events: `onPlayerReady` and `onPlayerStateChange`. The `onPlayerReady` function is executed when the player is ready, and it does two things: it calls the `loadVideoById` method to load the video by ID, and it sends a custom event to Google Analytics using the `ga` function. The `onPlayerStateChange` function is executed when the player state changes, and it does one thing: it sends a custom event to Google Analytics if the player state is playing.

This code works fine, but it also causes the reload of the video. When the user visits the website, the YouTube player is created and the video is loaded by the iframe API. Then, the `onPlayerReady` function is executed, and it calls the `loadVideoById` method to load the video again. This causes the video to stop and start from the beginning, and to show the thumbnail with the play button again. The user has to click the play button to resume the video, and then the `onPlayerStateChange` function is executed, and it sends another custom event to Google Analytics.

A possible solution

One possible way to avoid the reload of the video is to use a different method to load the video by ID, instead of the `loadVideoById` method. The YouTube iframe API provides another method called `cueVideoById`, which loads the specified video, but does not start playing it. This method does not reset the player state or the playback quality, so it does not cause the reload of the video. However, this method also does not fire the player events, so the web developer has to manually trigger the `onStateChange` event to send the custom event to Google Analytics.

Here is a modified version of the code that uses the `cueVideoById` method instead of the `loadVideoById` method:

“`javascript // Create the YouTube player

var player = new YT.Player(‘player’, {

height: ‘390’, width: ‘640’, videoId: ‘M7lc1UVf-VE’, // The ID of the YouTube video events: { ‘onReady’: onPlayerReady, // The function to execute when the player is ready ‘onStateChange’: onPlayerStateChange // The function to execute when the player state changes } }); // The function to execute when the player is ready

function onPlayerReady(event) {

// Cue the video by ID player.cueVideoById(‘M7lc1UVf-VE’); // Trigger the onStateChange event player.dispatchEvent(new Event(‘onStateChange’)); } // The function to execute when the player state changes

function onPlayerStateChange(event) {

// If the player state is playing if (event.data == YT.PlayerState.PLAYING) { // Send a custom event to Google Analytics ga(‘send’, ‘event’, ‘Videos’, ‘Play’, ‘YouTube’); } } “`

This code should prevent the reload of the video, and still track the video plays using Google Analytics. However, this solution may not work for all scenarios, and it may have some drawbacks, such as affecting the autoplay feature or the user experience. Therefore, the web developer should test and evaluate the code before implementing it on their website.

Conclusion

In conclusion, the reload of embeded YouTube videos on third-party websites is caused by the use of the `loadVideoById` method, which resets the player state and the playback quality. This method is often used by web developers who want to track the video plays using Google Analytics, but it also creates a poor user experience. A possible solution is to use the `cueVideoById` method, which does not reset the player state or the playback quality, but also does not fire the player events. The web developer has to manually trigger the `onStateChange` event to send the custom event to Google Analytics. This solution may not work for all scenarios, and it may have some drawbacks, so the web developer should test and evaluate the code before implementing it on their website.