Lite YouTube Embed (modified for Hype)

Download:
LiteYouTubeEmbedForHype.hype.zip (128,1 KB)

This uses modern JS and I added the CSS as a template literal. Apart from that, it loads the YouTube-player after a user click rather than immediately when Hype creates the scene. There are other solutions out there… just I found this one in a newsletter and had fun tweaking it for Hype. No minification has been applied and it contains all the comments of the original author found here:

3 Likes

This is great, Max!

This means the only thing needed to load a Youtube video is the 60kb (ish) thumbnail image instead of a huge JavaScript payload. If you have several on the page, it'll really speed up your Hype documents -- very noticeable on mobile devices and the same familiar red button to start it.

I used lazy-yt in our documentation to keep things snappy: https://tumult.com/hype/documentation/#creating-pencil-lines

2 Likes

That is great. The approach you mentioned requires jQuery. WordPress is currently fading out support for it with (the upcoming v5.6). There is a plugin to ease the transition, though. The solution above is also not a hundred percent ideal as it extends HTML Element and uses modern JS so it might not work on older browsers.

1 Like

Eeek..

Vanilla JS to the rescue or React, VUE etc. if you want a supporting framework. Not worth learning anything jQuery related for a while now. It is certainly dying at this point.

1 Like

Here is a variation that uses additional attributes:

You are a saint.

I opened your file, went into additional HTML attributes, and changed the YouTube string to LGHwgs2aKy0

So far so good. Next step: replace your poster image with mine.

I dragged video_placeholder.png into the Resources folder and in additional HTML attributes, changed the path to ${resourcesFolderName}/video_placeholder.png

Your image still shows as the poster image. Hmmm. And when I preview the scene, there is no poster image:

Your file attached with my modifications. Not sure what to do now . . . do I change the embedded HTML (although previously you said not to change the style.)

Also not sure how to remove the YouTube play button with transparency so that clicking on the poster makes the video start.

Thanks so so so so much. Know that you're not just helping me, but hundreds of others! :slight_smile:

Joe

LiteYouTubeEmbedForHypeWithCustomPoster 3.hype.zip (1.1 MB)

Just save it and reopen the file. This isn’t using a live refresh although that would be a nice tweak.

Here is a version using a live preview update based on Hype Data Decorator
LiteYouTubeEmbedForHypeWithCustomPoster.hype.zip (230,7 KB)

So close . . . and yet so far! I've recorded a short video to show you what I'm seeing here.

PROGRESS! :slight_smile:

Replacing the PNG with a JPG made it work.

Got rid of the YouTube logo by making it transparent in the JS (changed the opacity setting and the grayscale setting):

MISSION ACCOMPLISHED!

Thanks again
Joe

1 Like

Thank you again @MaxZieb and @Daniel!

1 Like