Resizing Embedded Youtube Video

The CMS Questions
1

The Width and Height tags in the (Video:) are not working.
(video: http://www.youtube.com/watch?v=lLuc6rtWkrM width: 900 height: 800)

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

2

Hm, Iā€™d say thereā€™s something wrong with the video tagā€¦

3

Or maybe CSS over ruling it?

4

What is your Kirby version?

5

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.

6

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
7

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.

8

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

9

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?

10

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

11

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

16

Well, the problem is that the Kirbytags outputs this:

<figure class="video" height="800" width="900"><iframe allowfullscreen="" src="https://youtube.com/embed/lLuc6rtWkrM"></iframe></figure>

when it should be

<figure class="video" style="height:800px; width:"900px"><iframe allowfullscreen="" src="https://youtube.com/embed/lLuc6rtWkrM"></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
17

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!

18

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;

  canvas,
  embed,
  iframe,
  object,
  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;
}

HTML:

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

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

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