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.

CommentsInsightsShare

More articles by this producer

Videos by this producer

MAHLE plant in Mühlacker/Germany

The roughly 3-minute film provides an initial impression of the MAHLE plant and also presents the principles and values that govern the way the team works together on a daily basis. And, of course, it highlights the innovative technologies that find application in the MAHLE thermal management produc