Kirby 2 video embed size problem

Kirby 2 Solved ✅
, ,
1

I’m finally working on updating my site from Kirby1.something to the latest release. It’s mostly going well but one thing has me stumped. On pages that have a YouTube or Vimeo embed (using kirbytext), the embed appears at 300px x 150px.

Previously I’d just do this

(vimeo: https://vimeo.com/176644101)

And the video would be the same width as the page text, with height scaled depending on the video aspect ratio. With Kirby 2 that gives me a tiny postage stamp embed.

If I add “width:100%” to the kirbytext tag, the width is as expected but the height is still 150. The only way I’ve found to get a different height is to specify it precisely.

(vimeo: https://vimeo.com/176644101 width:100% height:400)

That can’t be the right way but I can’t find anything else. What do I need to do differently in Kirby 2 to get a good embedded video?

2

Have you tried to set the height to auto?

3

If you mean something like

(vimeo: https://vimeo.com/176644101 width:auto height:auto)

That gives me the same 300x150 size that I get without auto. If I try it this way:

(vimeo: https://vimeo.com/176644101 width:100% height:auto)

I get full width but the height is still 150.

4

Is there anything in your configuration file about video sizes?

5

I thought I might have introduced something about video sizes (e.g. with the Phantom theme I’m trying to use). But if I backtrack to my initial git commit (an unmodified copy of the Kirby starter kit), I get the same results.

6

You can’t work with height: auto in iframes you need to wrap the iframe into some html element and add some css to the outer container.

I am using this solution:

my css file:

    .video-wrapper {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      margin: 1.5em 0;
    }

    .video-wrapper iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
    }

the kirby video tag automatically wraps the iframe with a figure element and sets a class that you can change via config file (you could also run with the standard kirby class and name your css class appropriately)

I use the video-wrapper css class so I had to set this:

c::set('kirbytext.video.class','video-wrapper');

Let me know if this can solve it for you

7

Andi-Lo, I added those styles to assets/css/main.css and added that config line to site/config/config.php. The video is still the same size, but now there’s a lot of extra whitespace around it. It looks like the video-wrapper class is the correct size, but the iframe inside it is still 300x150.

8

Maybe you are still setting the iframe height somewhere in your code? Or do you have some other css that might manipulate the height?

Did you remove the height from your kirby tag or do you still have something like

(vimeo: https://vimeo.com/176644101 width:auto height:auto) that might overwrite the css ?

9

I’m not setting the iframe height. I’m using an unmodified copy of the Kirby starter kit, so I have what it has and nothing more-- no extra code, and no CSS modifications. I’ve tried the embed tag with and without height and width. Even with neither of them I still get 300x150:

(vimeo: https://vimeo.com/176644101)
10

in my css above there was a typo mistake. I wrote
.video-warpper iframe

where it should be:
.video-wrapper iframe

shame on me, thats what happens when you preprocess scss to css on your own :grin:

Please fix the typo mistake and try if it works :slight_smile:

11

That works! Thanks. Now that I look back at my old Kirby 1.x stuff, your styles are almost the same as what I had been using. I wonder why this was dropped from the Kirby 2 starter kit. Thanks again.

12

same problem for me. I added correct codes and still it look 300*150

sorry my bad it is about cache. it works