Responsive youtube videos / embedding or else?

In the HTML editor from for example the articles module, a video can be added. But how can i make the video (for example a youtube video) also responsive.

 

Both types of adding (standard and embedded) result in embedded version like this

 

<p><iframe src="//www.youtube.com/embed/d4gJdorCA5Y" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>

<p> </p>

<p><iframe src="//www.youtube.com/embed/d4gJdorCA5Y" width="736" height="444" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

 

I read here about this topic. 

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

 

Is a boonex solution missing? Should not the articles modules already "embed" the video in a responsive way?

Quote · 23 Jan 2017

I tried this 

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/mRI3gYlIY-k' frameborder='0' allowfullscreen></iframe></div>

 

But after i SAVE

 

The code looks like this

<div class="embed-container"><iframe src="https://www.youtube.com/embed/mRI3gYlIY-k" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

 

So it is automatically stripped or altered.

 

Can this be stopped, or is there any other work around ?

Quote · 23 Jan 2017

Have you tried <iframe width=100%>

 

~~~~~~~~~~~~~~~~~~~~~~
MichelMeta-Travel.com
~~~~~~~~~~~~~~~~~~~~~~

TravelNotes.org - The Online Guide to Travel
Quote · 24 Jan 2017

I found a solution. The value for width alone, does not work. A value for height is automatically added.(150px) 

But when i use your suggestion, the width="100%" and i add also manually height="300" (a value that is approximately correct) then this works for the videos i use. 

On smartphone, tablet and regular the videos are rendered correctly. 

Quote · 24 Jan 2017

But is only a "workaround". 

Really great would be something like this width="100%" and height="auto" 

Does anyone have an idea?

 

 

Quote · 24 Jan 2017
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.