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?
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?
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?
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="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:
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;
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);