Getting the alugha video player responsive

we equipped our alugha video player in the way that it responds to CSS values. This can be done your CSS file (in WordPress, it is in the theme folder and in the styles.css) Add the following values:

Read this article in: Deutsch, English

Estimated reading time:0minutes

.flex-video {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
}
To make sure that the video player also works well on wide screen displays (16:9 / 16:10) you add also this values to your CSS file:

.flex-video.widescreen {
padding-bottom: 57.25%;
}
Last but not least we have to make sure, that the size of the video window is always following the browser window:

.flex-video iframe, .flex-video object, .flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

To embed the video now you just use this code:

<div class="flex-video widescreen">
<iframe src="https://alugha.com/embed/yt/?v=mbOEknbi4gQ" allowfullscreen="" frameborder="0"></iframe>
</div>
It takes nothing more than this few lines of code and your videos will always follow the window size of your browser.

Comments Insights Share

Videos by this producer

0:52

0:55

1:00

Getting the alugha video player responsive

More articles by this producer

Videos by this producer