So I found that it is very easy to embed a youtube video with the out of the box youtube embed shortcode, that can be found here hugo/tpl/tplimpl/embedded/templates/shortcodes/youtube.html at master · gohugoio/hugo · GitHub
and can be used with {{< youtube 0RKpf3rK57I >}} where the string is the youtube video’s id.
There are a few integrated default arguments that are accepted, which can be found here Shortcodes | Hugo at the part about youtube videos.
However, every video seems to have a certain size when embedded, and also seems to be at a fixed position, and underneath the next one when embedding two right after each other.
My questions: 1) Is it possible to change the size of the embed? Ideally as an argument that is passed with the video, such as {{< youtube id=0RKpf3rK57I height =90 width= 160 >}}
or a scale attribute, or something of the kind (to preserve the right height/width ratio automatically)
2) How would you go about having embedded videos be next tro each other? I.e. on the same “row”, and not on the next line/underneath one another.
The final result is supposed to be something like a 10x10 grid of youtube videos, all on one page.
I think a clue could be at line 98 of the youtube shortcode sourcecode, where it mentions
" {{- $iframeStyle := “position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;” }}"
But I didn’t wanna mess with that and possibly mess things inside of built in elements up.
Something tells me that the answer to this might be very simple, and I just overlook it.
If you know how to do this, let me know, very help is much appreciated.
Thanks!
Hey, thanks for the quick reply!
When I was going through the attributes I did pause on this one, thinking that it’s probably that, but only now fully realized what this actually means.
II need a bit more help though.
So I give it the argument {{< youtube id=0RKpf3rK57I class=embedstyle >}}
Is this correct?
And it removed the style attributes, but replaces them with what?
I’m guessing I need css somewhere to specify the new attributes but where would I do that? Is it in a new file, or an existing one?
Thanks
Alright, after tinkering around with it for way to long quite a while, I realized that I just don’t really have the full picture yet about how css, html and hugo interact with one another, what is what, and what goes where(I have to say that I’m relatively new to css and html as well) and understanding how it generally works, and also making it work somewhat, I still don’t know how to make them appear side by side.
If I add them to a markdown file in any way they always appear underneath each other. They also sometimes, when giving a wrong class but even with the right class name sometimes, default to something resembling about 25% size, which gets “fixed” when changing the width value.
Most things that I found said something about adding
display:inline-block;
to I believe the iframe part.
However, doing so does (seemingly) nothing, and adding it to the div.embedstyle part removes the embedded video altogether.
I’d like to give a simple example with the giraffe academy theme, however that one broke when I updated hugo recently, if I can fix it I will give an update.
I feel like the answer is as simple as adding a line somewhere, or even just rearranging certain things, but I sadly don’t know enough about how things work internally to do so.
In the simplest example imaginable, just a basic list and single template and a single css file, what needs to be modified for them to be side by side?
Thank you all
Alright, I had a little break from the project but have been tinkering around with it again. And just as I was stuck again wanting to ask, I figured it out. It’s not exactly what I’d like to have yet, but getting there.
I wanna give a quick guide for what I did.
I generated the standard hugo theme, put the code from jmooring in the main.css, added
width: 20%;
display: inline-block;
or alternatively
width: 20%;
float: left;
To the div’s attributes
and added
{{< youtube id=QctF-i4-GuM class=embedstyle >}}
three times in a row in one of the example posts.
That worked and they were side by side… sort of.
The key was to reduce the padding-bottom down to 11.25 (I’m guessing since the width is 1/5, the padding would be 1/5th as well, the ratio seems fine with 11.25).
I gotta admit I don’t exactly know why that works, but it does.
Then I wanted it to scale with the window size. I gave it a min-width of 300px
and while the result isn’t perfect, it’s good enough for now.
There’s one thing though that I’d still like to change. The height of the iframe gets squished quite a bit in small windows. I know that you can make it dynamic by using viewports, but I don’t know how to use them or declare them using hugo.
Is there another or quick way of making the bottom-padding adjust based on the window-width?
And one more question. Not related to hugo but the topic still. The height attribute of the div doesn’t seem to do anything. Am I missing something? In the default code it’s set to 0, but setting it to anything else doesn’t seem to make a difference.
Thank you for the help so far, and hope this all might help someone else as well.
…I’d suggest a different approach entirely with some modern CSS that would work in all updated browsers using aspect-ratio and flexbox. Adjust 33.33% as needed for how many you’d wish per line (33.33 = 100 / 3).
That is… pretty much exactly what I was trying to achieve. Thank you so much!
Yeah I noticed that html was being omitted when trying to add a div in a markdown file, and that I needed the “unsafe” option, but didn’t think I’d need it now. It definitely saved me some time to look up where to put it!
There’s one small thing left which isn’t a big deal, but maybe there’s a quick solution as well.
When there’s e.g. 7 videos, and 3 each row, the last one will take up the full width and have a respective height, i.e. pretty large. I know that this is how it’s supposed to be, but is there a way to “cap” the size of the remaining videos?
I set these values:
The issue is, that the last leftover entries will not be the size of the correctly sized ones and not adjust dynamically. It will also stop the properly adjusting ones from doing so, once they’re out of the given threshold.
And probably the biggest problem is, that the thresholds have to be somewhat eyeballed based on the given flex attribute to be somewhat appropriate.
I’ve never used the flex attribute so I don’t even know what to search for to find an answer for this.
But I’m guessing there’s some way of telling it to maintain the size for all elements(?)
It’s pretty neat though and I will be looking into it more in the future, so thanks for pointing me to it and also the already pretty good solution.
did something, but honestly, after looking at it again and using it for a while, it’s definitely good enough the way it is.
Also I’ll be looking into flexbox now, that’s exactly what I needed actually (quite a css beginner as you may tell, but hopefully getting there).
Thank you all for your replies
