How to prioritize Javascript

Question

I am dealing with this code written by somebody else and it is to load an image and a YouTube Video. My understanding his that I can change the priority of the script. Right now, it seems that when someone goes on this website with an iPhone and they hit the play button in front of the image, the video does not play, because the script is not finished loading. How do I alter the code below so that if the page or this script is not finished loading, the end user cannot see a play button?

By the way, this problem does not happen on an Android device, so I am not sure if that piece of information will serve as a clue.

I hope this makes sense because I am still trying to wrap my head around it.

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player1;
var player2;

function onYouTubeIframeAPIReady() {
  player1 = new YT.Player('player', {
    height: '390',
    width: '640',
    playerVars: {
      'controls': 0,
      'rel': 0
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  jQuery('.video-overlay').click(function() {
    event.target.setVolume(100);
    event.target.setPlaybackQuality('hd1080');
    setTimeout(function() {
      jQuery('.video-overlay').css('transform', 'scale(0)');
      jQuery('.homepage-tagline').hide();
    }, 300);
    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.
var done = false;

function onPlayerStateChange(event) {
  jQuery('.video-overlay').click(function() {
    event.target.setPlaybackQuality('hd1080');
    jQuery('.video-overlay').hide();
    jQuery('.slider-overlay').hide();
    event.target.playVideo();
  });
}

function stopVideo() {
  player.stopVideo();
}

I tried adding this piece of code:

jQuery('.video-overlay').css('opacity', 0);

but it didn't do much.

Give the player 0 opacity and add code in the onPlayerReady function that sets it to 1. Also mentioning platforms is a lot less relevant than mentioning browsers. Does chrome on iOS have the same behavior as Android or Safari? See? — Jared Smith
– Jared Smith, Commented Apr 11, 2017 at 14:55
looks like you video overlay is the thing you click to play it so why not hide it in css and then do a .show in your video player ready — Pete
– Pete, Commented Apr 11, 2017 at 14:56

Kody R. · Accepted Answer · 2017-04-11 14:58:20Z

1

It would be best to set the pointer-events to none and when onPlayerReady is fired, set the target.style.pointerEvents = "all"

answered Apr 11, 2017 at 14:58

Kody R.

2,4705 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Over a year ago

So, I would set event.target.setVolume(0) in the onPlayerReady function?

Daniel Over a year ago

Interesting, I was told this had to do with changing priority of javascript, but it seems it has to do with pointer-events which I have no experience with.

Kody R. Over a year ago

@Daniel setting the pointer-events in CSS to none will disallow any event listeners to pass through (such as clicks) so that the user cannot click on the play button until you set the firstScriptTag.style.pointerEvents = "all". Doing it this way will make it work but will not make the best user experience - it will confuse the user why it isn't playing when they click the play button the first time. It will at least fix the issue though

Daniel Over a year ago

hey Kody, yes i was actually working on that until another fire started that I am trying to put out right now. Thank you and I will keep you posted.

Collectives™ on Stack Overflow

How to prioritize Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related