Responsive YouTube Embeds

[davidvkimball]

Here's a suggestion: currently YouTube embeds on mobile look strange (oddly tall) with the default suggested copy/paste embed code.

So from this website, I borrowed it and it works quite well:

<div style="width: 100%; min-width: 400px; max-width: 800px;">
<div style="position: relative; width: 100%; overflow: hidden; padding-top: 56.25%;">
<p><iframe style="position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; border: none;" src="https://www.youtube.com/embed/38uzvN-plOg" title="YouTube video player" width="560" height="315" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe></p>
</div>
</div>

I've been using it basically as-is for post embeds, maybe it could help someone else.

[L4Ph]

It would be a destructive change, but personally I feel it would be better to use this component.
https://astro-embed.netlify.app/components/youtube/