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

.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.

CodeNameViewsPercentage
engEnglish28892.01%
deuDeutsch257.99%
Total313100%

More articles by this producer

Videos by this producer

4:00
2:40
1:10
This website uses cookies to ensure you get the best experience on our website. Learn more in our privacy policy.