YouTube embed too small

[liberomureddu]

Hi everybody!
First post here, and I wanted to thank all the people who have made this wonderful theme!

I have a question about embedding YouTube videos.
I used the code as in here

<div class="row">
    <div class="col-sm mt-3 mt-md-0">
        {% include video.liquid path="https://www.youtube.com/embed/ZbEWNc4kuJs?si=tmlEkenbuhN63TJQ" class="img-fluid rounded" %}
    </div>
</div>

but the resulting embedded video is too small. Moreover its upper and lower borders are slightly cropped. I tried to add width and height, played with column sizes, edited the css directly in the browser, but I haven't found any solution.

I then added to my page the code found here, and it works fine.

<div class="embed-container">
    <iframe width="640" height="390" 
    src="https://www.youtube.com/embed/ZbEWNc4kuJs?si=tmlEkenbuhN63TJQ" 
    frameborder="0" allowfullscreen></iframe>
</div>
<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>

However, I would like to be able to have a grid of YouTube videos, something I cannot do anymore with this workaround.
Any suggestion?
Thank you in advance for your time.

[liberomureddu]

I worked a bit more on the YouTube embed solution, and it seems it work well:

1. I added the following code to_sass/_layout.scss

code

.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%;
}

2. I modified _includes/video.liquid as follows:

code

{% assign extension = include.path | split: '.' | last %}

<figure class="embed-container">
  {% if extension == 'mp4' or extension == 'webm' or extension == 'ogg' %}
    <video
      src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
      {% if include.class %}
        class="{{ include.class }}"
      {% endif %}
      {% if include.width %}
        width="{{ include.width }}"
      {% else %}
        width="auto"
      {% endif %}
      {% if include.height %}
        height="{{ include.height }}"
      {% else %}
        height="auto"
      {% endif %}
      {% if include['min-width'] %}
        min-width="{{ include.min-width }}"
      {% endif %}
      {% if include['min-height'] %}
        min-height="{{ include.min-height }}"
      {% endif %}
      {% if include['max-width'] %}
        max-width="{{ include.max-width }}"
      {% endif %}
      {% if include['max-height'] %}
        height="{{ include.max-height }}"
      {% endif %}
      {% if include.title %}
        title="{{ include.title }}"
      {% endif %}
      {% if include.alt %}
        alt="{{ include.alt }}"
      {% endif %}
      {% if include.autoplay %}
        autoplay
      {% endif %}
      {% if include.controls %}
        controls
      {% endif %}
      {% if include.loop %}
        loop
      {% endif %}
      {% if include.muted %}
        muted
      {% endif %}
      {% if include.poster %}
        poster="{{ include.poster }}"
      {% endif %}
    />

  {% else %}
    <iframe
      src="{{ include.path }}"
      {% if include.class %}
        class="{{ include.class }}"
      {% endif %}
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
      {% if include.width %}
        width="{{ include.width }}"
      {% else %}
        width="100%"
      {% endif %}
      {% if include.height %}
        height="{{ include.height }}"
      {% else %}
        height="100%"
      {% endif %}
      {% if include['min-width'] %}
        min-width="{{ include.min-width }}"
      {% endif %}
      {% if include['min-height'] %}
        min-height="{{ include.min-height }}"
      {% endif %}
      {% if include['max-width'] %}
        max-width="{{ include.max-width }}"
      {% endif %}
      {% if include['max-height'] %}
        height="{{ include.max-height }}"
      {% endif %}
      {% if include.alt %}
        alt="{{ include.alt }}"
      {% endif %}
      {% if include.title %}
        title="{{ include.title }}"
      {% endif %}
    />
  {% endif %}
  {% if include.caption %}
    <figcaption class="caption">{{ include.caption }}</figcaption>
  {% endif %}
</figure>

Everything seems to work, but it'd be great to hear the opinion of more experienced people.
One can see the effect on the blog post entry about videos, in which the YouTube videos are at the same size as the locally stored videos.

[george-gca]

I am not a prolific web dev, but some things are a little confusing, like:

.embed-container { 
  position: relative;  // why set this when you override it next?
  padding-bottom: 56.25%;  // isn't this too much padding?
  height: 0;  // why set this when you override it next?
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;  // you override the relative position
  height: 100%;  // you override the height
}

also, setting position absolute makes it hard to understand it. What is it relative to in this case? This seems kind of the case where it works and idk why.

[liberomureddu]

I'm myself most likely much less prolific... I understood this is a sort of a hack, so I asked Copilot to comment the code. Moreover, a sort of similar solution is found here: https://hidde.blog/embedded-video-in-responsive-lay-outs/. Hopefully this is useful for those who are more proficient than me.

• .embed-container { position: relative; }
  Establishes a containing block for absolutely positioned elements inside it. This is crucial because the iframe, object, and embed elements will be positioned relative to this container.
  The position: relative; is not overridden. It sets the context for the absolutely positioned children.

• .embed-container { padding-bottom: 56.25%; }
  Creates a responsive aspect ratio for the container. The padding-bottom percentage is based on the aspect ratio of the content (e.g., 16:9 aspect ratio is 9/16 = 0.5625 or 56.25%).
  Not Too Much: This value ensures the container maintains the correct aspect ratio regardless of the viewport size.

• .embed-container { height: 0; }
  Ensures the container’s height is controlled by the padding-bottom percentage. This technique, known as the “padding-bottom hack,” is used to maintain the aspect ratio.
  The height is effectively managed by the padding, not overridden.

• .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; }
  Positions the embedded elements absolutely within the .embed-container. They are positioned relative to the .embed-container due to its position: relative;.
  This does not override the container’s relative positioning but works in conjunction with it.

• .embed-container iframe, .embed-container object, .embed-container embed { height: 100%; }
  Ensures the embedded elements fill the height of the .embed-container.
  This height setting ensures the embedded content scales correctly within the container’s aspect ratio.

Summary: The code ensures a responsive design by maintaining the aspect ratio of the embedded content. The position: relative; and height: 0; in the .embed-container are essential for setting up the context and maintaining the aspect ratio, while the absolute positioning and height settings for the embedded elements ensure they fill the container correctly.