Hugo Youtube Shortcode

For my series on kernel exploitation[0] I need to embed a YouTube video. The markdown code I’ve used for this wasn’t working. It most like does not due to some security configuration in the header of the webbrowser. Because, I did not wanted to re-configure them I’ve decided to embed it properly with a shortcodes[1] instead.

<div class="embed video-player">
<iframe class="youtube-player" type="text/html" width="640" height="385" 
 src="https://www.youtube.com/embed/{{ index .Params 0 }}" 
 allowfullscreen frameborder="0">
</iframe>
</div>

Hugo has an example within its documentation[1] that I used at first. However, it only embedded the Video in the text without adapting the size of the frame. When you opened the post on a mobile web browser it looked massively misalignment. The fix is to make the embedding responsive. Because I hate HTML, I just searched for something on the web and found a great tutorial[2]. I copied the code down from the example. So should out to Flavio Copes for this Tutorial! Great work mate!

The only problem that is left is one with the CSS code. It will be placed in the summary of the post instead of the first paragraph. I’m not sure how to address this. For the moment, I just put the video shortcode after a paragraph.

so far,
akendo

[0] https://blog.akendo.eu/post/2021-02-01-kernel-exploitation-part-one/
[1] https://gohugo.io/templates/shortcode-templates/#single-positional-example-youtube
[2] https://flaviocopes.com/responsive-youtube-videos/