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:
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
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.
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.
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! 
Joe
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!
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
what about adding
static get observedAttributes() {
return ['videoid'];
}
attributeChangedCallback(name, oldValue, newValue) { // (4)
this.connectedCallback();
}
to allow dynamic changes of the video. would this have drawbacks¿
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!
ah, sry did not see your custom changes the thread further down 
btw why didn't you make use of the builtin observer & callback
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:
Hi @MaxZieb and friends,
I'm using the lite-yt-embed.js to create a tabbed section with three videos, one in each tab:
Looking to make two adjustments, and would love input.
First, I need to make the video stop when you move to another tab.
This is my inner HTML on my video rectangle:
<lite-youtube videoid="sDncaKgCrQs" poster="video1poster.jpg" style="background-image: url("video1poster.jpg");">
<button type="button" class="lty-playbtn">
<span class="lyt-visually-hidden">Play Video</span>
</button>
</lite-youtube>
This javascript function empties the rectangle:
var emptyInnerHTML = '';
hypeDocument.getElementById("video1").innerHTML = emptyInnerHTML
I guess I need a javascript function to refill the rectangle. Can you help?
The other mod I'd like to make is to lose the gradient that is overlaid on the poster. Not sure what code to tweak in your .js file.
Thanks, as always!
Joe
You may find this helpful in stopping the video on tab change.
The code I provided there is for symbol but simply changed
And you would need to put you own start stop code in the handleVisibilityChange() function
Trying again . . . and making this simpler 
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.
Can someone show me the light? Hoping so!
Thank you!
Joe
Videotest.hype.zip (487.5 KB)
Just set the data attributes using JavaScript again…
BTW you should purge innerHTML once (meaning, click the pen tool and remove the inner HTML).
Videotest-max1.hype.zip (458,7 KB)
I removed all the extra files to debug it easier… turned out to be an easy fix.
