Youtube embed not visible after publishing

Hi, I have used the youtube lazyload plugin from Printninja on this page https://edwineijpe.com/Tutorials.html

In preview it works great, bun not on the published website.

Anyone knows how to solve this?

Can you be more specific on where the Lazy Load came from? It’s built into the app now so if you’re using external scripts for it, you might want to browse around the settings in the app instead.

1 Like

I created that component. Looking at your site’s source code, I do not see links to the CSS file

<link rel="stylesheet" href="/Youtube-Video-Lazyload.css">

Or the js file

<script src="/Youtube-Video-Lazyload.js"></script>

anywhere on your page. They should have been installed when you added the component. So that would probably be the problem.

Also, you’ve only got three videos on your page, so I don’t think you even need to use this component. I created this for pages where a person is embedding a lot of videos (like 10 or more.)

The ordinary embed component would work just fine for only three videos.

You try to read the height of your cookie-alert but you don’t have any cookie-alert on your page, that makes an Uncaught TypeError: Cannot read property ‘offsetHeight’ of null
That is why it doesn’t work
Your function that set accept cookies should only be visible on your index page
maar het is een leuke video

@printninja
he use minify so Youtube-Video-Lazyload.css and Youtube-Video-Lazyload.js
are in the styles.min.css and script.min.js files

Thanks I missed that. I will have another look at it.

He’s talking about videos, not images. There’s no option (I know of) in BSS to lazy-load the preview frames of embedded videos (although YouTube may have solved this issues in the years since I created this component.)

I did it out of necessity a couple of years ago, because I had a client with 35 embedded YouTube videos on one page, and it was taking forever for YouTube to populate the page with all the placeholder frames for the videos.

It’s definitely an issue with your .JS

when I open your site in Pinegrow, and add the CSS and JS to the page manually, the videos show up and the script runs. (Not sure why the play button image isn’t loading. It’s hosted on imgur.com, and the graphic is definitely still there, so maybe a cross domain issue, or something to do with previewing the page on Pinegrow’s local server?)

I probably should update the component, and embed the play button so it’s loaded locally. It’s loading fine on my client’s live website, which is what I originally created this component for.

EDIT: Okay, I uploaded a new version of this shared component - Youtube Video Lazyload 2020 - which has the play button embedded. Everything else is the same. I wish there was a way to update shared components when you change or improve them, but apparently the only thing you can do is delete them from the online library, and then re-share them. Unfortunately, this means you lose all the comments and votes on the component, as well as the number of shares it’s gotten. So rather than go that route, I just added a newer version.

(Also, this forum software is set so it won’t let you post more than three posts in a row unless someone replies in between. Seems dumb. Gotta mention that to Martin.)

In your cookie code replace this

var cookieAlert = document.querySelector(".cookiealert");
var acceptCookies = document.querySelector(".acceptcookies");
cookieAlert.offsetHeight;

to this

var cookieAlert = document.querySelector(".cookiealert");
var acceptCookies = document.querySelector(".acceptcookies");	
if (!cookieAlert) {
  return;
}
cookieAlert.offsetHeight;

and there will be no error so we all can watch your videos :slightly_smiling_face:

@printninja
now you can post three more :crazy_face:

2 Likes

Lol… I already complained to Martin about the limitation in the site feedback category. But thanks. :rofl:

@3Edwin
If you still want to use my YouTube Lazy Load component, get the updated version, with the start button image embedded. Youtube Video Lazyload 2020

(though you really don’t need this for a mere three videos.)

1 Like

Thanks a lot @printninja!

I’ll probably post more videos later, so I’ll definitely use your updated component.

Thanks @kuligaposten! I’ll change that.

@3Edwin

I use this cookie banner for websites aimed at users in the EU.
GDPR + EU Cookies Directive (JavaScript scripts will be loaded only after the user clicks “I agree”.)

have a look here

If you are interested I can post it as a component in the online library

1 Like

I am Kuli, would be most appreciated.

1 Like

@kuligaposten

Yes, it would be great if you post it in the online library!