Set width of iframe coming from embed plugin or video block

1

Hi,
I have used the embed Plugin by @sylvainjule and also tried the video block from blocks section.
Either variant gives me an iframe with a fixed width of 200px. However I only set a URL with noch information about width and height. So, where does this width and this height come from?
How can I override it?

Cheers
Oliver

2

Hi @oliver_koehler. I’m missing some context here. Is this in the context of the Starterkit, a theme, your own project?

Have you used your browser’s developer tools to check where this styling is coming from?

3

Hi @texnixe , this is in the context of my own project.
As for the embed plugin from @sylvainjule I did the following:

  • Added the plugin to the plugins folder
  • Added a field of type embed to my page.yml in the blueprints/pages folder
  • Added the following code in my page template to display the embedded video:
if($embed = $page->myfield()->toEmbed()) {
    echo $embed->code()
}

The result is an iframe with width of 200 and a height that respect the ratio.

4

I had the same problem. I fixed it like this:

  <style>
            .videoWrapper {
                position: relative;
                padding-bottom: 56.25%; /* 16:9 Aspect Ratio (höhe/breite * 100%) */
                height: 0;
            }
            .videoWrapper iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        </style>
        <div class="max-w-content mx-auto mb-10">
            <div class="text-white text-xl md:pr-[25%] textblock">
                <p><?= $page->shortdesc(); ?></p>
            </div>
            <div class="videoWrapper">
                <?php if($embed = $page->embed()->toEmbed()): ?>
                 <figure>
                  <span>
                    <?= video($embed->url()) ?>
                  </span>
                  <?php if ($embed->caption()->isNotEmpty()): ?>
                  <figcaption class="video-caption"><?= $embed->title() ?></figcaption>
                  <?php endif ?>
                </figure>
                <?php endif; ?>
            </div>
        </div>