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:
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.
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.
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.
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 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!
The version with data decorator should allow changes? Just change the data-yt-videoid. In general, Hype could allow native custom elements as great way to extend inner HTML, but that would require us to set the node type. Currently we can only change the role.
Having the node type would allow us to link the additional attributes' panel directly to custom elements, as changes to the custom elements would trigger updates in the element.
That is actually an easy implementation in Hype and would offer a powerful interface!
Because the native "observer" monitors/checks the element itself and I wanted it to be in additional attributes and not go into inner HTML. Just added a feature request to allow custom node names:
I've attached a Hype file that shows a YouTube video (thanks to @MaxZieb's awesome JS).
I've placed three buttons underneath, and I'm trying to figure out how to make the red one work. Maybe it's as simple as a syntax issue. Admittedly, I'm out of my comfort zone
The first button empties the innerHTML. This works as I'd like. The video will be on a tab, and when the tab goes away, so will the video.
The second button is what I'm after. I'd like to reload the original innerHTML so that the poster shows, and the user can click on it to play the video.
The third button is my lame workaround. I've figured out how to reload the inner HTML with the YouTube video but not with Max's poster-enhanced version.