search

kevinweber / lazy-load-for-videos

Speed up your site by replacing embedded Youtube and Vimeo videos with a clickable preview image. Free WordPress plugin.
http://wordpress.org/plugins/lazy-load-for-videos/
GNU General Public License v3.0
41 stars 23 forks source link

Is there a way to use the plugin without jQuery? #20

Closed lucasdidthis closed 5 years ago

lucasdidthis commented 5 years ago

Hej!

I would really like to use your plugin, but I do not use (and I don't want to use) jQuery.

Is there a way to use the plugin without jQuery or is there a chance you're going to change to Vanilla JS anytime soon?

Thanks and all the Best Lucas

kevinweber commented 5 years ago

@lucasdidthis I started working on this today. Would you be able to test the update before I publish it to the world? I can share a ZIP file so you can upload it to your webspace before the official release.

lucasdidthis commented 5 years ago

Yeah sure, anything I can do to help making this work! :-)

kevinweber commented 5 years ago

Here we go @lucasdidthis: https://github.com/kevinweber/lazy-load-for-videos/archive/kw--refactor.zip Can you please upload the content of this ZIP file to your webspace and make sure everything works as expected? Then I'll release this as version 2.7.0 to the world. Note that jQuery is currently still used for the admin panel; it's not required for the public-facing part of your WordPress site. If you're interested in the code changes, check out #21 (warning: it's a lot of changes).

kevinweber commented 5 years ago

@lucasdidthis If you have a chance, please take a look today. Otherwise I'll simply go for it and publish the change. I'll only work on improving this plugin this week. Any potential issues need to be resolved by the end of this week.

lucasdidthis commented 5 years ago

@kevinweber Wow, that was fast, thank you so much! I'm going to look into it today, but could you please explain how to set up the ZIP? Do I install the current Version of the plugin and override the files with the files from the ZIP via FTP? Or do I create a folder manually in the plugin directory and insert the files from the ZIP (without the plugin installed)?

kevinweber commented 5 years ago

@lucasdidthis Ah, yes, I'd recommend:

  1. Download the ZIP file: https://github.com/kevinweber/lazy-load-for-videos/archive/kw--refactor.zip
  2. Unzip it and you'll get a folder "lazy-load-for-videos-kw-refactor".
  3. Upload what's in the folder (not the folder itself) into the existing plugin folder on your webspace so it replaces existing files. The path to the folder should be something like: wp-content/plugins/lazy-load-for-videos/
  4. In case something goes wrong, you can delete the plugin folder entirely and download the plugin again the way you did originally.
  5. You can see that it worked if in the admin panel (/wp-admin/options-general.php?page=lazyload.php) shows version number 2.7.0 next to the title text.

Thank you so much for testing this!

lucasdidthis commented 5 years ago

The Plugin throws an error on its settings page (which does not appear anywhere else): Your active theme might be missing the call to <?php wp_footer(); ?> Always have it just before the closing tag of your theme, or you will break many plugins. See wordpress.org.

lucasdidthis commented 5 years ago

Unfortunately I have some (apparently plugin unrelated) problems with Video embeds in general currently. I hope I can fix them during the day.

kevinweber commented 5 years ago

@lucasdidthis The "wp_footer" error shouldn't be caused by my latest changes… You should get it even without them. Have you checked if your theme includes "wp_footer" somewhere in it?

What's the issue with your video embeds? You might need to refresh all your embeds:

lucasdidthis commented 5 years ago

@kevinweber Thanks for the help. I did resolve the "wp_footer"-error (it was indeed missing in the theme I wrote), but I can't make the embeds work. I did deactivate all plugins and changed the website to the "Twenty Nineteen" Theme, but the embeds still won't work. If I use the embed-code provided by YouTube on the other hand, the videos show up. So my problems does not seem to be related to this plugin, but I unfortunately can't really test the plugin. :-(

lucasdidthis commented 5 years ago

Propably the code it puts out in the frontend (instead of the videos) helps to identify the problem:

<div>
<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=ioZX_pJz-Cc","type":"video","providerNameSlug":"youtube","className":""} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube">
<div class="wp-block-embed__wrapper">https://www.youtube.com/watch?v=ioZX_pJz-Cc</div>
</figure>
<!-- /wp:core-embed/youtube -->
</div>
kevinweber commented 5 years ago

This could still be related to my plugin even after deactivating...

Have you ever updated one of the posts with a broken video after you recognized the link is broken? Please try that: Update a post and see if the link is still broken for that post.

Were those links broken before you uploaded my ZIP file?

What JavaScript errors is the browser DevTool throwing, if any?

On Thu, May 9, 2019, 7:05 AM Lucas notifications@github.com wrote:

Propably the code it puts out (instead of the videos) helps to identify the problem: `

https://www.youtube.com/watch?v=ioZX_pJz-Cc `

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kevinweber/lazy-load-for-videos/issues/20#issuecomment-490919201, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVID73HDIAN4KJO4D45LV3PUQVTBANCNFSM4HKHTSKA .

lucasdidthis commented 5 years ago

I've updated the post several times (to try different things), yes. Every time I re-open the post to edit it, it shows a loading spinner for a very short time, but then the embed still fails. Just like when embeding it for the first time.

My blog is rather new, there was no video-post before I installed the updated (ZIP) plugin. Unfortunately I can't tell, if the embed mechanic broke when I installed the new version of the plugin or if the problem existed before, or even if it existed before installing the regular version of your plugin. Would it help do delete the plugin and test the embed again without it?

When visiting the frontend, there's now error, just some warnings:

Content Security Policy: Ignorieren von "'unsafe-inline'" innerhalb script-src: 'strict-dynamic' angegeben
Content Security Policy: Ignorieren von "https:" innerhalb script-src: 'strict-dynamic' angegeben
Content Security Policy: Ignorieren von "http:" innerhalb script-src: 'strict-dynamic' angegeben

when visiting the video post in the backend, there's no error either, just some warnings:

JQMIGRATE: Migrate is installed, version 1.4.1 -> load-scripts.php:8:552
onmozfullscreenchange sollte nicht mehr verwendet werden. -> components.min.js:12:80764
onmozfullscreenerror sollte nicht mehr verwendet werden. -> components.min.js:12:80764

Thanks for your help. :-)

kevinweber commented 5 years ago

Assuming that you disabled my plugin and you saved the post after disabling it, I'm fairly certain that this issue is not related to my plugin.

On Thu, May 9, 2019, 8:23 AM Lucas notifications@github.com wrote:

I've updated the post several times (to try different things), yes. Every time I re-open the post to edit it, it shows a loading spinner for a very short time, but then the embed still fails. Just like when embeding it for the first time.

My blog is rather new, there was no video-post before I installed the updated (ZIP) plugin. Unfortunately I can't tell, if the embed mechanic broke when I installed the new version of the plugin or if the problem existed before, or even if it existed before installing the regular version of your plugin. Would it help do delete the plugin and test the embed again without it?

When visiting the frontend, there's now error, just some warnings:

Content Security Policy: Ignorieren von "'unsafe-inline'" innerhalb script-src: 'strict-dynamic' angegeben Content Security Policy: Ignorieren von "https:" innerhalb script-src: 'strict-dynamic' angegeben Content Security Policy: Ignorieren von "http:" innerhalb script-src: 'strict-dynamic' angegeben

when visiting the video post in the backend, there's no error either, just some warnings:

JQMIGRATE: Migrate is installed, version 1.4.1 -> load-scripts.php:8:552 onmozfullscreenchange sollte nicht mehr verwendet werden. -> components.min.js:12:80764 onmozfullscreenerror sollte nicht mehr verwendet werden. -> components.min.js:12:80764

Thanks for your help. :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kevinweber/lazy-load-for-videos/issues/20#issuecomment-490949735, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVID75XWINEBUR7HWCM75DPUQ6VLANCNFSM4HKHTSKA .

lucasdidthis commented 5 years ago

Sorry for digging this up, but there seem to be a problem with your plugin after all. :-(

I made the embed work, but when I install the new version of the plugin (you provided via ZIP), it kills the embed in the frontend. Than it shows a simple link to the video instead of a Screenshot of the video.

lucasdidthis commented 5 years ago

The Problem does appear, if the plugin is used straigt from the wordpress plugin repository, too. :-(

kevinweber commented 5 years ago

Ugh… Luckily, I was able to reproduce this issue on one of my test sites. I just pushed another update: v2.7.1. Please give it a try and let me know if the issue is fixed.

The beauty of jQuery is that is prevents issues like this one. Now that the plugin is no longer relying on jQuery, I had to solve the issue myself. It has to do with when the script is being called. This is the fix, in case you're interested: https://github.com/kevinweber/lazy-load-for-videos/commit/2bec044a26e0ae04c85d77023b07ba59d94c5d03#diff-72c9f3aae47db4ea2b40daa8c8027b61

lucasdidthis commented 5 years ago

Unfortunately the update doesn't do anything for me. In both of my installs (the regular one I fixed recently and a test system I set up to find my error) the plugin still breaks the videos. By the way: The problem appears no matter if I define a thumbnail or a pattern in the plugin settings.

I understand that jQuery does make things easier, but it often add s a lot of unnecessary weight to the site, so I prefer to work with vanilla JavaScript whenever I can.

kevinweber commented 5 years ago

Can you share a link to your test system or, much better, your theme files?

kevinweber commented 5 years ago

Can you please also make sure that the option "Only load CSS/JS when needed" in the plugin's admin settings is NOT checked?

lucasdidthis commented 5 years ago

Can you please also make sure that the option "Only load CSS/JS when needed" in the plugin's admin settings is NOT checked?

Did not do anything. :-(

Can you share a link to your test system or, much better, your theme files?

Sure, its on https://inkmyday.com/, but I need an email adresse to send you the htaccess data - since I do not want to publish it here.

The error appears regardless of the theme, on this test system I'm using the standard theme (Twenty NineteenVersion: 1.4).

lucasdidthis commented 5 years ago

Weird stuff going on (without me doing/changing anything)!

Now only the link to the video shoes up in the post editor again, but it does work in the frontend now - kind of. Some CSS-Stuff does not work; There's an empty space (sized exactly like the video, caused by a ":before"-element in front of the "container-lazyload"-element) and after loading the video by clicking the Screenshot, the iframe is pushed down (overlapping the next article).

You're almost there ;-)

lucasdidthis commented 5 years ago

There's a simple fix to get the css right:

figure > div.wp-block-embed__wrapper > div.container-lazyload{ top: 0; right: 0; bottom: 0; left: 0; position: aboslute; }

lucasdidthis commented 5 years ago

So the only thing not working is the preview of the embed in the posts right now, But that's not a deal breaker.