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. 

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

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

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.

 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;

@yzisano

When i add a PHP block, then this would occur on every page of the articles module. I need a solution for different articles.

Hello mrtn!

In PHP block you may set different conditions to show content. From your latest message there isn't clear what "solution for different articles" is need for you and how articles should be divided.

With the best regards, Leonid