Why don't we add responsive video embeds by default?

Kirby 2 Solved ✅
,
1

Is there a technical reason why the videos aren’t embeded responsively by default?

I’m imagining simply adding styles for the iFrame, like shown here:

<style> .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class='embed-container'>
<iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe>
</div>

This works similarly for Vimeo and the like. I’m no expert, maybe there are technical limitations to this? I’m adding it custom to my installations, but I figure just about anything beats the tiny little embeds that are there by default.

I appreciate any explanations people have. :relaxed:

2

Kirby generates a <figure> tag around the iframe by default. You can manually give it a class by using:

(youtube: whatever class: embed-container)

or you can set a default class in the config.php:

c::set('kirbytext.video.class', 'embed-container');
4 Likes
3

What about adding a default class to <figure> then we can target this class with CSS.
So we don’t delegate styles to config.php.

4

There is a default class. :smiley:
It is video.

3 Likes