Youtube container size issues?

support
1

I tried the youtube shortcode in a post and while the container is responsive, it is always too tall for the video at the typical 16:9 aspect. Is there a way to fix this?

Capture.PNG830Ă—648 359 KB

2

also, before you hit play, the preview thumbnail is larger than the container, so it’s as if the thumbnail is fitting to the vertical size (and being cut off on the sides) and the video is fitting to the horizontal size (and is being padded at the top and bottom).

3

There is a known bug about youtube dimensions I believe, although I am not sure this is directly relevant:

You might try to fix it by creating your own partial called youtube.html.

An example (zurb foundation styling, so you may need to adapt):

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

This also adds a new param for the youtube start time in seconds i.e.:

{{< youtube 4FkSZIW6d48 1070 >}}

4

seems like that would just hardcode the size and make it unresponsive to screen changes or different (mobile) screen sizes. am I wrong? I didn’t experience what that issue references, but my issue is visible in his issue too.

5

That example uses Zurb foundation styling (which is responsive). You would need to restyle. The point is that you can create your own shortcode with your own styling, not that you should copy \ paste my solution (unless you use foundation).

You can even grab the youtube shortcode code from here: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/template_embedded.go and try and fix it in your own shortcode.

6

Hey, so after figuring out what Zurb foundation was (lol) I was able to get the responsive-embed portion of the code working. It looks fantastic. Thank you. It’s unfortunate it doesn’t work this well with the internal youtube shortcode but maybe that issue you mentioned will resolve it?

For anyone interested… here is a method for doing this responsive container for youtube in Jekyll, maybe it can be translated into Hugo shortcode?

7

I’ve posted the simple solution here:

But the tl;dr is use this as a shortcode for 16:9 videos:

<div style="position: relative; padding-bottom: 56.25%; overflow: hidden;">
    <iframe style="position: absolute; width: 100%; height: 100%;"
        src="http://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0">
    </iframe>
</div>
8

EDIT 1
I’ve been hacking away and I’ve got a solution that will allow the user to use any video display ratio they want, given a standard set of inputs.

The code is here:

{{ if or (eq (index .Params 1) "widescreen") (not (index .Params 1) ) }}
    {{ $.Scratch.Add "ratio" 56.25 }}
{{ else if eq (index .Params 1) "standard" }}
    {{ $.Scratch.Add "ratio" 75 }}
{{ else }}
    {{ $nums := split (index .Params 1) ":" }}
    {{ $.Scratch.Add "ratio" (div (mul (int (index $nums 1)) 100.0) (int (index $nums 0))) }}
{{ end }}
<div style="position: relative; padding-bottom: {{ $.Scratch.Get "ratio" }}%; overflow: hidden;">
    <iframe style="position: absolute; width: 100%; height: 100%;"
        src="http://www.youtube.com/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0">
    </iframe>
</div>

This allows the user to leave .Param 1 blank to give a 16:9 format (basically default). If the user puts widescreen then it will be 16:9. If the user puts standard it will be 4:3. If the user puts anything else, it MUST be in the format of “X:Y” where X and Y are integers (not floating point numbers). So the user could put “16:9” to get a 16:9 ratio, or “4:3” to get the standard ratio, or “235:100” to get 2.35:1 ratio. The numbers have to be integers (just multiply both sides equally by orders of magnitude until they are both integers) and they have to be separated by a colon, and they have to be in double-quotes. Given those constraints, they can render a YouTube video in any ratio they want.

Usage:
{{< youtube Pt9MjE70Fd8 >}}
{{< youtube Pt9MjE70Fd8 widescreen >}}
{{< youtube Pt9MjE70Fd8 standard >}}
{{< youtube Pt9MjE70Fd8 "16:9" >}}
{{< youtube Pt9MjE70Fd8 "4:3" >}}
{{< youtube Pt9MjE70Fd8 "235:100" >}}

HA! This even works with vertical videos using a ratio of "9:16"

{{< youtube 17uHCHfgs60 "9:16" >}}

1 Like
9

Glad you got it sorted.

Just want to point out that Zurb Foundation can do different ratios too (but then I really like Foundation + scss):

http://foundation.zurb.com/sites/docs/responsive-embed.html

10

I have added this shortcode in my md file

{{<youtube WX9TDlEoQFo>}} and how do i make it appear in this place, i want my video to dynamically change by connecting to netlify CMS

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