Preloading a youtube embed

Question

I want to have an embedded chromeless youtube video preload its video WITHOUT playing when the page loads. Right now I'm using an awkward "play then quickly pause" script which causes small problems (half-second audio leaks and fails quite a bit). For this seemingly simple functionality, is there a better/more elegant way to preload?

Answer 1

I had the same question and came across this question. After some research, I think I found a cleaner, albeit similar, answer.

When the JavaScript API calls OnYouTubePlayerReady, you press play and add an event listener to onStateChange that will be called every time the player changes from buffering to play.

For example, inside the function you listen for state 3, which is buffering, and as soon as it's called, you pause the video.

You can see this technique in action in this jsFiddle.

Side note: I refrained from using a JavaScript framework in my example, but you could easily put one into place here.

Also, I was unable to abstract the script tag out of the body of the HTML using jsFiddle, but an external script.js file works just fine on my own server.

Answer 2

If we view this: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Preloading the Iframe may help:

    <link rel="preload" href="https://www.youtube.com/embed/dQw4w9WgXcQ" as="document">

Answer 3

I was looking for a solution to this problem and ran across this article:

Embed YouTube Videos Responsively without Increasing Load Time

The summary states: This method will reduce the size of your webpages by 300-400 KB while making your site mobile friendly.

Paste this on the page:

<div class="youtube-container">
<div class="youtube-player" data-id="VIDEOID"></div>
</div>

The javascript:

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    }
})();

function labnolThumb(id) {
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}

function labnolIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" +
        this.parentNode.dataset.id + "?  autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

The CSS:

<style>
.youtube-container {
    display: block;
    margin: 20px auto;
    width: 100%;
    max-width: 600px;
}
.youtube-player {
    display: block;
    width: 100%;
    /* assuming that the video has a 16:9 ratio */

    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: hand;
    cursor: pointer;
    display: block;
}
img.youtube-thumb {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    height: auto
}
div.play-button {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
}
#youtube-iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
</style>

Refer to the original article comments for additional modification suggestions and improvements.

Answer 4

Call

player.cueVideoById(videoId:String);

Instead of

player.loadVideoById(videoId:String);