How to insert youtube videos in a responsive way?

How do you insert youtube videos (or any other possibility)  in a responsive way into for example the articles module?

 

I found this solution (it is in german) language:

http://maddesigns.de/responsive-iframes-2417.html

 

Could i add the css into the default.css file and use the html code as advised?

 

Do you have a solution to this issue? Does anyone know why this is an issue in the first place? Why is this a problem at all? width=60% height=auto would be so easy to use. 

Quote · 27 Oct 2017

Did you visit the GitHub in the link?  I might look into this myself when I have time.

Geeks, making the world a better place
Quote · 27 Oct 2017

use this http://embedresponsively.com

Always remember that the future comes one day at a time.
Quote · 28 Oct 2017

 

use this http://embedresponsively.com

 

Thank you. But when i close the editor, the source code is stripped from

 

<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//dby6JV_04Hc' frameborder='0' allowfullscreen></iframe></div>

 

to

 

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

 

How can i prevent this?

Quote · 31 Oct 2017

 

 

use this http://embedresponsively.com

 

Thank you. But when i close the editor, the source code is stripped from

 

<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//dby6JV_04Hc' frameborder='0' allowfullscreen></iframe></div>

 

to

 

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

 

How can i prevent this?

You have to add it to the htmlpurifier.  Two things happen when you post from the front end; tinyMCE cleans up the code and it is also passed to htmlpurifier which will remove any bad code.  Since the iframe source code is not recognised by htmlpurifier it is removed.  Now, if you post from the backend, htmlpurifier is not called because only admins can post from the backend.

To add the code to htmlpurifer you can examine my whitelist approach. https://www.boonex.com/forums/topic/HTMLpurifier-adding-other-iframe-conditions-.htm

Geeks, making the world a better place
Quote · 31 Oct 2017

Thanks. But i did it in the backend. I use a duplicated articles module. Could this be a reason? I will try in the regular articles module. I suppose that keeping it in the blacklist for security reasons is a "better" decision. Not quite sure.

Quote · 31 Oct 2017

 add PHP block and type this

 

$g = '

<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//dby6JV_04Hc' frameborder='0' allowfullscreen></iframe></div>

';

//now outputting this to HTML

echo $g;

 

 

use this http://embedresponsively.com

 

Thank you. But when i close the editor, the source code is stripped from

 

<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//dby6JV_04Hc' frameborder='0' allowfullscreen></iframe></div>

 

to

 

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

 

How can i prevent this?

 

Always remember that the future comes one day at a time.
Quote · 13 Nov 2017