Style Tag for Embedded iFrame

[Samantha Smith]

Hi - I'm hoping someone might be able to help me with an issue that's come up following the last IPB upgrade. 

 

Prior to the last update I was able to click the "source" button in a WYSIWYG block, add code to create an embed-container which would allow me to add an iFrame which was responsive to the size of screen that the page was being viewed on.  Last Friday I  tried to create a page with the exact same code but each time I clicked save, all the styling wass removed and I ended up with an iframe that is tiny and sits in one corner of the page.

 

The code had been using is:

<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 height='650px' src='https://docs.google....&embedded=true'width=''></iframe> </div>

 

When I'm in Page Editor it looks perfect, but the minute I click "Finish Editing" all the <style> code vanishes and I'm left with:

<div class="embed-container">
<iframe height="650px" src="https://docs.google....;embedded=true"width=""></iframe>
</div>

 

It's driving me nuts!

 

IPB Technical Support tell me this is down to the "previous version working incorrectly - the style tag you're trying to insert should only be inserted into the head section of an html document".  Unfortunately that means nothing to me as I'm having to learn how to create HTML code by trial and error.

 

Can anyone suggest a piece of style code that will allow me to create a responsive iframe which will be used to display documents saved to either Google Drive or Microsoft OneDrive?

 

Many thanks,

Samantha

 

[Nathan Explosion]

Just put the styling in to your custom.css (edit theme's html/css etc)

.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%;
}