Embedded YouTube videos

[fmaida]

Would it be possible to display embedded YouTube videos that extends to the full page width?

Actually when I try to embed videos, they show up inside some tiny boxes like this one:

IMHO it would be awesome if an embedded YouTube video could have a full page width and a proportional height.

Thank you and best regards

[MattSLangford]

Hi! Thanks for using the Tiny Theme.

Youtube embeds are a headache due to the way they’re built. However, there are a couple fixes. The quickest and easiest is to use a site called embedresponsively.com. You enter in the link to a YouTube video and it give you better embed code that is full-width and also responsive.

Having said that, I’ll see about doing something better for the theme. In looking at your site code, I noticed the embed code you used is different than what I see on that YouTube video. Where did you get the code you used?

Hopefully I can make this as easy as possible for everyone.

Thanks!

— Matt Langford mattlangford.com http://mattlangford.com/

On Jun 12, 2023, at 9:49 AM, Francesco Maida @.***> wrote:

Would it be possible to display embedded YouTube videos that extends to the full page width?

Actually when I try to embed videos, they show up inside some tiny boxes like this one:

https://user-images.githubusercontent.com/605017/245181114-23bb226e-45a3-4995-89a3-723cd73981d3.png IMHO it would be awesome if an embedded YouTube video could have a full page width and a proportional height.

Thank you and best regards

— Reply to this email directly, view it on GitHub https://github.com/MattSLangford/Tiny-Theme-for-Micro.blog/issues/4, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKHCHFCNYVNDJP7I77W5Y3LXK4T6TANCNFSM6AAAAAAZDP5XCM. You are receiving this because you are subscribed to this thread.

[fmaida]

Thanks

I just copied and pasted the HTML code provided by YouTube. On the screenshot I have previously posted, by accident I have probably deleted the width and height attributes. On other occasions I tried to modify the attributes with width="100%" and height="auto", but it didn't work as I expected.

[MattSLangford]

Youtube iframe embeds are almost impossible to make fully responsive across browsers without additional scripts. Since this theme uses no additional scripts as a policy, the recommendation is to use tools like embedresponsively.com instead.

[fmaida]

Could you not write a plugin to install on micro.blog for your theme that converts a placeholder into an embed code snippet from embedresponsively.com ?

For example:

From ->

{{< youtube "QILiHiTD3uc" >}}

To ->

<style>
    .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
    .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
    <iframe src='https://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen>
    </iframe>
</div>

I know how to create a shortcode in Hugo but I have no idea about how to make it work as a micro.blog plugin.

[MattSLangford]

That's a possibility, but it would be down the road a bit. It would need to properly handle every YouTube video size (not just 4x3 and 16x9) properly. I'll add it to the list and see if I can work out all the contingencies.

[fmaida]

I wrote my very first plug-in for micro.blog, and apparently it's working properly. Even with 4:3 aspect ratio videos: in that case, there are two vertical black bands on both left and right sides.

https://github.com/fmaida/mbplugin-youtube

[MattSLangford]

Looks good. Add it to the plugin directory on Micro.blog!