How to integrate responsive YouTube, Vimeo, Dailymotion?

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


With Youtube :

<!-- Styles Flexible iFrame -->
<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>

<!-- Responsive iFrame -->
<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 :

<!-- Styles Flexible iFrame -->
<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>

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

With Dailymotion :

<!-- Styles Flexible iFrame -->
<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>

<!-- Responsive iFrame -->
<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)

© Source : Alistapart.com    |   Webdesignerwall.com    |   Niklaus Gerber

Back to top