<p>This is, most likely, not an issue with Video Embedder, or Craft.</p>
<p>I think you are most likely just seeing the normal behaviour of an iFrame. An iFrame, like any replaced element in html, is 300px wide and 150px tall, if neither are explicitly declared. I suspect that either your iFrame is actually 300x150px, or that it already has width and height attributes set directly on the iFrame.</p>
<p>The solution is simple, define the width you want.</p>
<p>You could do this with an inline style but it would be preferable to use css. The css here is Tailwindcss, but you get the idea:</p>
<pre><code>&lt;iframe class=&quot;w-full max-w-[500px] aspect-video&quot; src=&quot;{{ embed }}&quot;&gt;&lt;/iframe&gt;
</code></pre>

CC BY-SA 4.0
2024-02-28T14:29:29.040Z
2024-03-01T17:04:36.197Z
2024-03-01T17:04:36.197Z
Seth Warburton
<p>Agree, nothing to do with twig/php on this one.
You gotta adjust styles on the iframe to increase the embeded media.</p>
<p>Check the approach used in bootstrap <a href="https://getbootstrap.com/docs/5.3/helpers/ratio/#about" rel="nofollow noreferrer">ratios</a> for example.
You can either force a width, or just go 100% in the container.</p>

CC BY-SA 4.0
2024-02-28T20:08:15.907Z
2024-02-28T20:08:15.907Z
Leo Leoncio
<p>CSS is your friend, here's some vanilla (SaSS format):</p>
<pre><code>.embed-container
    position: relative
    padding-bottom: 56.25%
    height: 0
    overflow: hidden
    max-width: 100%

    iframe,
    object,
    embed
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
</code></pre>
<p>html/twig:</p>
<pre><code>{# Video Embed #}
&lt;section&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;figure&gt;
            &lt;div class=&quot;embed-container&quot;&gt;
                &lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/WaqIn4IjPkY&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
            &lt;/div&gt;
            &lt;figcaption&gt;This is a video sub-caption&lt;/figcaption&gt;
        &lt;/figure&gt;
    &lt;/div&gt;
&lt;/section&gt;
</code></pre>

CC BY-SA 4.0
2024-03-19T08:00:05.650Z
2024-03-19T08:00:05.650Z
cherrykoda
<p>My video embeds are working but they are way too small.</p>
<p>I've read around in circles how to do this but it's not working.</p>
<ul>
<li><p>I have a field called videoUrl (it's a URL field).</p>
</li>
<li><p>I'm using Video Embedder plugin for Craft 1.1.4.</p>
</li>
</ul>
<p>My video block has this code:</p>
<pre><code>{% set video = block.video[0] %}

{% set provider = video.videoProvider %}
{% set url = video.videoUrl %}
{% set embed = craft.videoEmbedder.embed(url) %}
{% if embed|length %}
    {{ embed }}
{% endif %}
</code></pre>
<p>This loads the video on the page but it's tiny 200x113 pixels.  I want it to be bigger but can't figure out how.</p>
<p>I tried changing this line:</p>
<pre><code>{% set embed = craft.videoEmbedder.embed(url) %}
</code></pre>
<p>to</p>
<pre><code>{% set embed = craft.videoEmbedder.getEmbedUrl(url) %}
</code></pre>
<p>but then it just outputs a video link without the https:  <code>//youtube.com/video</code>.</p>
<p>I think it has something to do with safe links but I'm not sure totally.  What do I need to do to get the video showing at 500px wide?</p>

<frontend><embed><video>
can't figure out how to embed youtube videos
# can't figure out how to embed youtube videos

(Asked by: username_0 on 2024-02-26)

My video embeds are working but they are way too small.
I've read around in circles how to do this but it's not working.

I have a field called videoUrl (it's a URL field).

I'm using Video Embedder plugin for Craft 1.1.4.


My video block has this code:
{% set video = block.video[0] %}

{% set provider = video.videoProvider %}
{% set url = video.videoUrl %}
{% set embed = craft.videoEmbedder.embed(url) %}
{% if embed|length %}
    {{ embed }}
{% endif %}

This loads the video on the page but it's tiny 200x113 pixels.  I want it to be bigger but can't figure out how.
I tried changing this line:
{% set embed = craft.videoEmbedder.embed(url) %}

to
{% set embed = craft.videoEmbedder.getEmbedUrl(url) %}

but then it just outputs a video link without the https:  //youtube.com/video.
I think it has something to do with safe links but I'm not sure totally.  What do I need to do to get the video showing at 500px wide?

**Tags:** frontend, embed, video

---

## 3 answers

### Answer by username_1 on 2024-02-28. Score: 4

This is, most likely, not an issue with Video Embedder, or Craft.
I think you are most likely just seeing the normal behaviour of an iFrame. An iFrame, like any replaced element in html, is 300px wide and 150px tall, if neither are explicitly declared. I suspect that either your iFrame is actually 300x150px, or that it already has width and height attributes set directly on the iFrame.
The solution is simple, define the width you want.
You could do this with an inline style but it would be preferable to use css. The css here is Tailwindcss, but you get the idea:


---

### Answer by username_2 on 2024-02-28. Score: 1

Agree, nothing to do with twig/php on this one.
You gotta adjust styles on the iframe to increase the embeded media.

Check the approach used in bootstrap [ratios](https://getbootstrap.com/docs/5.3/helpers/ratio/#about) for example.
You can either force a width, or just go 100% in the container.


---

### Answer by username_3 on 2024-03-19. Score: 1

CSS is your friend, here's some vanilla (SaSS format):
.embed-container
    position: relative
    padding-bottom: 56.25%
    height: 0
    overflow: hidden
    max-width: 100%

    iframe,
    object,
    embed
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%

html/twig:
{# Video Embed #}

    
        
            
                
            
            This is a video sub-caption


---

