Currently on our site we utilize Bootstrap for our skin, which helps provide responsive layout. I've noticed that if you use the (embed or image) it inserts the item. Which is then wrapped in a __div__ element that seems to break the responsive design.
Also when you insert videos into the module, it will add an __iFrame__ which is also wrapped within this __div__ element. Unfortunately even when you set Responsive, it doesn't modify the height in some cases or actually try to be responsive. It resides at a fixed height and width, unless you try to manually adjust the item in percentages and manually remove these __div__ elements.
I'm not sure if it is due to Bootstrap, but I was hoping to resolve this issue.
Comments: ** Comment from web user: tha_watcha **
Also when you insert videos into the module, it will add an __iFrame__ which is also wrapped within this __div__ element. Unfortunately even when you set Responsive, it doesn't modify the height in some cases or actually try to be responsive. It resides at a fixed height and width, unless you try to manually adjust the item in percentages and manually remove these __div__ elements.
I'm not sure if it is due to Bootstrap, but I was hoping to resolve this issue.
Comments: ** Comment from web user: tha_watcha **
Well, the problem for me is i don't really have test case for that i can only try the dom live editing in the browser.
But what i do see on your site is that when all wrap divs are removed i can still see the same problem, with mobile.
For me this doesn't seem like an issue with the editor, however i think i found a solution
The editor media embed plugin adds the embeddedContent css class to the div wrapper around the iframe. So adding the following css snippet
```
.embeddedContent iframe {
max-width: 100%;
}
```
makes the video reponsive for mobile, at least it works with your dom manipulated website.