Closed fmaida closed 1 year ago
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.
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.
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.
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.
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.
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.
Looks good. Add it to the plugin directory on Micro.blog!
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