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

Raqami TV | Alugha

A revolutionary new service in the video industry!!! A report about the unique platform Alugha, Alugha gives you the tools to make your videos multilingual and broadcast in the language of your viewers. Try translation using artificial intelligence and create multilingual videos to reach a global au

AppSumo Presents: Alugha (Multilingual Version)

Ever wanted to host videos and expand your audience across language barriers without the headache of dealing with complicated tech or file formats? Well, today is your lucky day because alugha launches their once in a lifetime deal on Appsumo. Get lifetime access to the complete alugha video transl