Have you tried troubleshooting your web browser? Perhaps tried a different web browser, or start up your browser with no extensions?
I reckon that your browser has a unique problem causing the trouble only for you.
1 Like
I’m not fussed about which site is used. It can be jsfiddle, jsitor, codepen, or any other. But if you are having a worse experience than everyone else, that is something that should be dealt with instead of just ignoring it.
2 Likes
What browser?
It doesn’t matter, just anything else.
What is the web browser that you have been using, and which version is it?
I want to experience the same problem as you so that I can try to fix it. That means trying your same web browser to see if I can experience the same issue.
If I can experience the problem using your same web browser, then there’s likely some update that should be made to the code.
If I can’t experience the problem, then you likely have a config problem with your browser.
I put it into an html page and those videos started up right away inside the browser.
Which web browser? (Firefox, Edge, Chrome, Opera, Internet Explorer, Mozilla, Safari)
What version? (89, 91, 92, 77, 11, etc…)
I want to use the same web browser as you, so that I can experience the same problem.
I too am using the Chrome web browser, There must be something weird about your configuration that results in only you having the problem that you experience.
If you don’t want to investigate what’s weird about your own web browser, I’m happy for us to not use jsfiddle anymore.
I like jsfiddle, but for video stuff, not so much.
I only test it in jsitor if autoplay is being used, and I’m not a fan of their interface, except for being able to download code into an html file off their site which I just learned now you can do.
I just have to remember to have this in all the codes use a split image.
const splitWrap = document.querySelector(".split-wrap");
splitWrap.style.pointerEvents = "none";
You can also have it in code that doesn’t use a split image.
const splitWrap = document.querySelector(".split-wrap");
if (splitWrap) {
splitWrap.style.pointerEvents = "none";
}
That way the same set of code can be used regardless of whether splitwrap is there or not.
1 Like
Why am I receiving these errors from jslint?
https://jsfiddle.net/jokefny7/2/
- Redefinition of ‘cover’ from line 1.
const cover = evt.currentTarget;
19: 92. Redefinition of ‘cover’ from line 1.
const cover = document.querySelectorAll(“.jacketa”);
37: 113. Redefinition of ‘player’ from line 29.
const player = event.target;
43: 114. Redefinition of ‘player’ from line 29.
const player = event.target;
57: 115. Redefinition of ‘player’ from line 29.
const player = new YT.Player(video, {
const cover = document.querySelector(".split-wrap");
(function manageCurtain() {
"use strict";
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
const splitWrap = document.querySelector(".split-wrap");
splitWrap.style.pointerEvents = "none";
}
const cover = document.querySelectorAll(".jacketa");
cover.forEach(function(el) {
el.addEventListener("click", coverClickHandler);
});
}());
const videoPlayer = (function makeVideoPlayer() {
"use strict";
const player = null;
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100); // percent
}
let hasShuffled = false;
function onPlayerStateChange(event) {
const player = event.target;
const shufflePlaylist = true;
if (!hasShuffled) {
player.setShuffle(shufflePlaylist);
player.playVideoAt(0);
hasShuffled = true;
}
}
function addPlayer(video) {
const playlist = "M7lc1UVf-VE";
const player = new YT.Player(video, {
width: 640,
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars: {
autoplay: 0,
controls: 1,
loop: 1,
rel: 0,
iv_load_policy: 3,
cc_load_policy: 0,
fs: 0,
disablekb: 1,
playlist
},
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
});
}
function play() {
player.playVideo();
}
return {
addPlayer,
play
};
}());
function onYouTubeIframeAPIReady() {
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);
}
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget;
show(wrapper);
videoPlayer.play();
}
cover.addEventListener("click", coverClickHandler);
}());
JSLint is pretty harsh, but helps to ensure good coding practices.
Often latter messages are fixed by dealing with earlier issues, so we should deal with the issues one at a time from the top, then check again.
Here is the first issue:
Redefinition of ‘cover’ from line 1.
const cover = evt.currentTarget;
We already have a variable called cover defined, right at the top of the code. But that’s a different cover from the one that the event handler was assigned to.
The manageCurtain code doesn’t only have one cover, it’s actually multiple covers. We should rename the variable to show that.
// const cover = document.querySelectorAll(".jacketa");
// cover.forEach(function(el) {
const covers = document.querySelectorAll(".jacketa");
covers.forEach(function(el) {
That only leaves the split-wrap cover variable at the top which has no relevance to the manageCover code, and can be moved down to where it’s used, both in the onYouTubeIframeAPIReady function, and with the click handler at the bottom of the code.
// const cover = document.querySelector(".split-wrap");
...
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".split-wrap");
const wrapper = cover.parentElement;
...
}
...
const cover = document.querySelector(".split-wrap");
cover.addEventListener("click", coverClickHandler);
}());
The next issue is:
Redefinition of ‘player’ from line 28.
const player = event.target;
Here is where the player is being defined and redefined.
const player = null;
...
function onPlayerReady(event) {
const player = event.target;
That player = null should have been your first clue that it is not to be defined using const.
Further down there is a play function that needs access to that player variable. We want that player to be redefined. The solution? Use let to allow the player to be redefined.
// const player = null;
let player = null;
...
function onPlayerReady(event) {
// const player = event.target;
player = event.target;
The same issue is solved in the onPlayerStateChange function:
function onPlayerStateChange(event) {
// const player = event.target;
player = event.target;
and is solved in the addPlayer code:
function addPlayer(video) {
const playlist = "M7lc1UVf-VE";
// const player = new YT.Player(video, {
player = new YT.Player(video, {
The next issue is:
Undeclared ‘YT’.
player = new YT.Player(video, {
We just need to tell JSLint that YT is expected as a global variable, for which a JSLint directive is used. It’s only a comment, but it gives useful information to JSLint.
/*global YT */
(function manageCurtain() {
The next issue is:
Expected property ‘height’ to be ordered before property ‘width’.
height: 360,
Object properties should be defined in alphabetical order.
player = new YT.Player(video, {
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
},
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars: {
autoplay: 0,
controls: 1,
loop: 1,
rel: 0,
iv_load_policy: 3,
cc_load_policy: 0,
fs: 0,
disablekb: 1,
playlist
},
width: 640
});
That doesn’t work for us though because width and height are separated a long way from each other.
Because I want to maintain some logical order to the properties, we can define them separately in the config object.
const playlist = "M7lc1UVf-VE";
const config = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
config.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
loop: 1,
playlist,
rel: 0
};
config.events = {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
};
player = new YT.Player(video, config);
That keeps us happy and it keeps the linter ordering requirement happy too.
The next issue is:
Expected ‘use strict’ at column 5, not column 3.
“use strict”;
JSLint expects there to be 4 spaces of indenting on lines, which is designed to inform you about when you have too much nested indenting taking place.
With JSFiddle you can go to Settings and set the indent to 4 spaces. When you then use Tidy on the code, the 4 space indent then properly occurs.
Or at least, that works on my desktop computer. For some reason it doesn’t work in JSFiddle on my laptop so we can also use beautifier.io to appropriately indent the code.
The next issue is:
Expected one space between ‘function’ and ‘(’.
covers.forEach(function(el) {
It is possible to solve that just by adding a space, but it’s a good indication about the function itself. Functions are more informative when they are named.
// covers.forEach(function(el) {
covers.forEach(function addHandler(el) {
And that solves all of the warnings from JSLint, helping to tidy up issues in the code.
2 Likes
I messed up somewhere.
Go back to previous working code, and do things one step at a time, testing after each step, until you figure out where things got messed up.
It is a failure to test that causes people to get lost in a tangled mess, with no way out. Test frequently, test often, and you gain immediate feedback about what went wrong.
2 Likes
I got up to here and everything is still working.
jslint wants 4 spaces, I thought it was supposed to be 3. Maybe I forgot.
Four spaces is the standard. That is what JSLint expects, and should get.
1 Like
I got it working.
https://jsfiddle.net/9z1obpg5/1/
This should be able to help fix all my other ones that are set up this same way.
1 Like
You do have some commented code in there that should be removed. For example:
// covers.forEach(function(el) {
covers.forEach(function addHandler(el) {
In my code excerpts, I use comments to help you to find the old code, so that you know what should get replaced.
It’s much more efficient way to inform about what gets replaced, than giving before and after examples:
Before:
covers.forEach(function(el) {
After:
covers.forEach(function addHandler(el) {
Just bear in mind that the commented-out code doesn’t belong in your code.
1 Like