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.
CodeNameViewsPercentage
engEnglish321 90.42%
deuDeutsch34 9.58%
Total355100%

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