Satty Satty - 1 month ago 10
CSS Question

How to make iframe fit into my parent contenteditable div on pasting?

I am trying to embed youtube videos in my contenteditable div.The problem is that the iframe already has a width and a height defined beforehand. So it overflows from the div boundaries. I know I can use regex to parse and change the width on pasting the code but I was looking for more reliable solution...Thanks

Here is the code:

$('div[contenteditable]').bind("paste", function(e) {
e.preventDefault();
console.log('hello');
var text =e.originalEvent.clipboardData.getData('text');
//do something with text to specify width and height of parent
});

Answer

If you only want to limit the sizes with by a maximum value you can simply use max-width: 100%; and max-height: 100%; on the iframe.

JSFiddle: https://jsfiddle.net/2nr0fncg/