Youtube shorts support

[shakaran]

Youtube seems that is really adopting the fast wave for shorts.

I would like get the same look & feel than Youtube embedded shorts

For example for this one:
https://www.youtube.com/shorts/hFzavKKdV_w

The original iframe load with:

<div class="video-container">
    <iframe src="https://www.youtube.com/embed/hFzavKKdV_w" title="¿Conoces la manzana de oro? 🌟🍏" allowfullscreen></iframe>
</div>

Using lite-youtube:

<div class="video-container">
	<lite-youtube videoid="hFzavKKdV_w" playlabel="¿Conoces la manzana de oro? 🌟🍏"></lite-youtube>
</div>

If you notice the show several aspect ratio diferent, the logo of youtube shorts for play, the suscribe option, etc

Would this possible to achieve? Thanks

[davidsneighbour]

lite-youtube-embed/src/lite-yt-embed.css

Line 43 in 1b88628

padding-bottom: calc(100% / (16 / 9));

sets the aspect ratio of the video to 16:9. I guess all you need to do is to set .video-container-for-shorts lite-youtube to a different aspect ratio to achieve that. The Youtube shorts aspect ratio is 9:16.

[daameerstone]

What if we want to use both horizotal and vertical (normal and short) on the same page, since it relies on ::after it will append the same ratio to both videos. Does anybody have an idea for a workaround?

[daameerstone]

I spent an all-nighter instead sleeping but to answer my own question after focusing on JS instead solely on CSS. Now only to add min height/width so it fits my needs.
After this line: this.dataset.title = this.getAttribute('title') || "";
Added: this.orientation = this.getAttribute('orientation') || "";

And then:
if (this.orientation === 'short') {
this.style.paddingBottom = "calc(100% / (9 / 16))";
}
if (this.orientation === 'normal') {
this.style.paddingBottom = "calc(100% / (16 / 9))";
}

While using orientation="short" or "normal" as orientation of <youtube lite
}