Preventing YouTube caching in browser

JavaScript
1

Preventing YouTube from being cached in the browser until the image is clicked.

How would I be able to do this, because I can’t figure it out.

I don’t know how this would be done because the code is set up differently, with player_api in the html part.

It’s the " player_api " that’s still being caught in the browser. How would I be able to prevent that until the image is clicked?

Code:

Html:

<script type="text/javascript" src="https://www.youtube.com/player_api"></script>

Javascript:

(function manageCover() {
    "use strict";
    const hide = (el) => el.classList.add("hide");

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
    "use strict";

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(50); // percent
    }

    function onPlayerStateChange(event) {
        const player = event.target;
        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video) {
        const videoId = video.getAttribute("data-id");
        new YT.Player(video, {
            width: 606,
            height: 344,
            videoId: videoId,
            playerVars: {
                autoplay: 1,
                controls: 1,
                showinfo: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1,
                loop: true,
                start: 200,
                end: 204
            },
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        });
    }

    function init(opts) {
        addVideo(opts.video, opts.playerVars || {});
    }
    return {
        init
    };
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video")
        });
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());
2

This should do the job.

3

I don’t understand that.

4

It’s only this piece:

<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
5

Use his load code, after which you can do something like the following:

load.js("https://www.youtube.com/player_api").then(function () {
    videoPlayer.init({
        video: ...
    });
});
6

I almost got it:
I’m messing up on the ending curly braces.


      load("https://www.youtube.com/player_api").then(function() {
        videoPlayer.init({
          video: wrapper.querySelector(".video")
           });
});
7

ReferenceError: load is not defined

    load("https://www.youtube.com/player_api").then(function() {
      videoPlayer.init({
        video: wrapper.querySelector(".video")
      });

    });

  }
8

You raced ahead doing the second part, ignoring the first part that must be done.

9

I thought this was the load code:


 load("https://www.youtube.com/player_api").then(function() {
     videoPlayer.init({
         video: wrapper.querySelector(".video")
     });
 });
 }
10

I don’t understand what I’m reading in that link.

What section of code?

11

Nope. That’s instead using the load function that needs to already be there.

12 
function load() {

    }
13

const load = (function() {

14

It’s not that easy. In the article from post #2 it’s the code from the linked article, on down to the “usage” comment.

15

I don’t get this:

var load = (function() {
  // Function which returns a function: https://davidwalsh.name/javascript-functions
  function _load(tag) {
    return function(url) {
      // This promise will be used by Promise.all to determine success or failure
      return new Promise(function(resolve, reject) {
        var element = document.createElement(tag);
        var parent = 'body';
        var attr = 'src';

        // Important success and error for the promise
        element.onload = function() {
          resolve(url);
        };
        element.onerror = function() {
          reject(url);
        };

        // Need to set different attributes depending on tag type
        switch(tag) {
          case 'script':
            element.async = true;
            break;
          case 'link':
            element.type = 'text/css';
            element.rel = 'stylesheet';
            attr = 'href';
            parent = 'head';
        }

        // Inject into document to kick off loading
        element[attr] = url;
        document[parent].appendChild(element);
      });
    };
  }
  
  return {
    css: _load('link'),
    js: _load('script'),
    img: _load('img')
  }
})();

// Usage:  Load different file types with one callback
Promise.all([
    load.js('lib/highlighter.js'), 
    load.js('lib/main.js'), 
    load.css('lib/highlighter.css'),
    load.img('images/logo.png')
  ]).then(function() {
    console.log('Everything has loaded!');
  }).catch(function() {
    console.log('Oh no, epic failure!');
  });
16

That’s the “load” code that lets you avoid doing:
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>

17

What parts am I using, and what parts don’t I need.

18

Start by using it all to get things working. When things are working, you can remove parts until it stops working.

1 Like
19

How am I supposed to know if I’m doing it right?

step 1, var to const:


const load = (function() {
  // Function which returns a function: https://davidwalsh.name/javascript-functions
  function _load(tag) {
    return function(url) {
      // This promise will be used by Promise.all to determine success or failure
      return new Promise(function(resolve, reject) {
        const element = document.createElement(tag);
        const parent = 'body';
        const attr = 'src';

        // Important success and error for the promise
        element.onload = function() {
          resolve(url);
        };
        element.onerror = function() {
          reject(url);
        };

        // Need to set different attributes depending on tag type
        switch(tag) {
          case 'script':
            element.async = true;
            break;
          case 'link':
            element.type = 'text/css';
            element.rel = 'stylesheet';
            attr = 'href';
            parent = 'head';
        }

        // Inject into document to kick off loading
        element[attr] = url;
        document[parent].appendChild(element);
      });
    };
  }
  
  return {
    css: _load('link'),
    js: _load('script'),
    img: _load('img')
  }
})();

// Usage:  Load different file types with one callback
Promise.all([
    load.js('lib/highlighter.js'), 
    load.js('lib/main.js'), 
    load.css('lib/highlighter.css'),
    load.img('images/logo.png')
  ]).then(function() {
    console.log('Everything has loaded!');
  }).catch(function() {
    console.log('Oh no, epic failure!');
  });
20

First get it working with no changes being made. Then after that you can work on the code.