Jump to content

Community

Style Tag for Embedded iFrame


Samantha Smith
 Share

Recommended Posts

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy