can't figure out how to embed youtube videos

Question

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?

Answer 1

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 2

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 for example. You can either force a width, or just go 100% in the container.

Answer 3

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>