Websico help - Responsive Youtube, Vimeo, Dailymotion

Home

Manual

Components

Go further

How to integrate responsive YouTube, Vimeo, Dailymotion?

In a Raw Text (HTML) copy/paste the following code :

With Youtube :

<style>
.Flexible-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>


<div class="Flexible-container">
<iframe src="https://www.youtube.com/embed/scNkLWV7jSw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

See elements, arrangements and settings in simulated edition mode

With Vimeo :

<style>
.Flexible-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>


<div class="Flexible-container">
<iframe src="https://player.vimeo.com/video/25118844?title=0&byline=0&portrait=0" width="546" height="307" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
</div>

With Dailymotion :

<style>
.Flexible-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
</style>


<div class="Flexible-container">
<iframe frameborder="0" src="https://www.dailymotion.com/embed/video/xti8g8"></iframe>
</div>

The element can be moved anywhere in the page and all standard style properties can be applied (Borders, Margins, Colors)