Resizing Embedded Youtube Video

The Width and Height tags in the (Video:) are not working.
(video: width: 900 height: 800)

I am posting this line of code in a text section.
Any Idea?

Hm, I’d say there’s something wrong with the video tag…

Or maybe CSS over ruling it?

What is your Kirby version?

I don’t think so, because assigning width="100" etc. to a figure tag doesn’t make sense. If anything, it should use an inline style tag and then you would have to adjust the iframe with 100% width and height via CSS, I think.

I am using the latest kirby version.
@texnixe I do not see what is wrong, I copied this code from the kirby official site. Could you please tell me alternative way?

1 Like

I’m not saying there’s something wrong with your code but with how the video tag is implemented => bug.

On a side note: Please use the Kirby 3 questions category when asking questions regarding Kirby 3. Thanks.

You could use my plugin while you wait for a fix since it seems like an issue…

From the title is seems you are embedding local videos not videos from external sources?

Then if you want to embed stuff from Youtube, better use a custom KirbyTag?

Oh yes, im blind, didnt realise it was a youtube vid. My plugin is for videos uploaded into the panel.

Thank you all for the reply , but I am still stuck here.

Well, the problem is that the Kirbytags outputs this:

<figure class="video" height="800" width="900"><iframe allowfullscreen="" src=""></iframe></figure>

when it should be

<figure class="video" style="height:800px; width:"900px"><iframe allowfullscreen="" src=""></iframe></figure>

Additionally, you would have to set the iframe to 100% width and height.

But there’s nothing you can do about it, unless you set the width and height via CSS instead of through the tag or create a custom Kirbytag.

I created an issue on GitHub:

1 Like

I agree to @texnixe:

use css, then you can set different video sizes for phones and desktop computers in the css-file!
You need this for a responsive website!

The video in question above is a bit of a weird size, but in general It’s better to make it fluid, rather than using multiple sizes per breakpoint. It is less code.

I use the following SASS

// 16:9 ratio
$ioe-padding: ((100 / 16) * 9);

@mixin ioe {
  height: 0;
  padding-bottom: to-percentage($ioe-padding);
  position: relative;

  video {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    user-select: none;
    width: 100%;

@function to-percentage($input) {
    @return $input * 1%;

// Usage

.embed {
@include ioe;


<div class="embed">
///iframe / video tag goes here

Your video has a 9:8 ratio so it should work fo you set the variable to:

$ioe-padding: ((100 / 9) * 8);