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

IZO Cloud Command Portal - Teaser

IZO™ Cloud Command provides the single-pane-of-glass for all the underlying IT resources (On-premise systems, Private Cloud, Cloud Storage, Disaster Recovery, Amazon Web Services, Microsoft Azure, Google Cloud Platform, etc). About Tata Communications: Welcome to Tata Communications, a digital ecos