Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-02-28T14:29:29.040Z
Answers.LastActivityDate: 2024-03-01T17:04:36.197Z
Answers.LastEditDate: 2024-03-01T17:04:36.197Z
Answers.UserDisplayName: Seth Warburton
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-02-28T20:08:15.907Z
Answers.LastActivityDate: 2024-02-28T20:08:15.907Z
Answers.UserDisplayName: Leo Leoncio
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-03-19T08:00:05.650Z
Answers.LastActivityDate: 2024-03-19T08:00:05.650Z
Answers.UserDisplayName: cherrykoda
Body: <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>
  
Tags: <frontend><embed><video>
Title: can't figure out how to embed youtube videos
ThreadText: # 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:
  
  ```
  <iframe class="w-full max-w-[500px] aspect-video" src="{{ embed }}"></iframe>
  
  ```
  
  
  ---
  
  ### 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 #}
  <section>
      <div class="container">
          <figure>
              <div class="embed-container">
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/WaqIn4IjPkY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
              </div>
              <figcaption>This is a video sub-caption</figcaption>
          </figure>
      </div>
  </section>
  
  ```
  
  
  ---
  
  