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.

More articles by this producer

Videos by this producer

archos CEO

2020 was particularly difficult because of the Covid 19 crisis, however, our team has shown tremendous resilience and in 2021 Archos intends to surprise with new innovations and an improved business model. We will invite our shareholders in early Q2 2021 for a presentation of our strategy plan.