I have the custom code I would like to display (see below), its the landing page of the website that I only want to view my p5.js sketch, so I embedded it as an iframe. The only issue now is getting the iframe to resize to the height of the screen, so my sketch can be fully visible on different screen sizes without having to scroll. Please help me solve this issue!
I entered the following code in Page-->Settings-->Advanced-->Header-->>>>
<style>
#site-title {display:none!important;}
#page.container {display:none!important;}
#siteWrapper.clearfix.site-wrapper {display:none!important;}
</style>
<script>
setTimeout(function(){
window.location.href = 'https://goodwellandbetter.com/introduction-and-curatorial-statement';
}, 300000);
</script>
<div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6063a8fceb34c530581d6d9b">
<div class="row sqs-row">
<div class="col sqs-col-12 span-12">
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_1_1617144028502_3267">
<div class="sqs-block-content">
<iframe frameborder="0" name="Outside the Form" width="100%" height="1080px" src="https://editor.p5js.org/mariamadam/present/SNlipKxEa" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
Try doing this
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
Related
I am trying to embed an Adobe Portfolio into an iframe without much luck. I need to include both images (which appear to have a JS dependency) and links to open in a new window.
The iframe"standbox" directive is not behaving.
I have tried many permutations of other directives and narrowed it down to "allow-scripts" and "allow-popups" that work separately but not together.
I suspect this is something to do with Adobe Portfolio itself but cannot figure out why!?
Please note - code snippet doesn't run fully as expected within stack overflow site - probably because they have their own standbox directive!
<html>
<head></head>
<body>
<style>
.fl {
width: 300px;
float: left
}
</style>
<div class="fl">
<h1>Images working</h1>
<h3>sandbox="allow-scripts" <br/> (script appear to be needed for images)</h3>
<iframe src="https://picturelinktest.myportfolio.com" sandbox="allow-scripts" height="350" width="200" ></iframe>
</div>
<div class="fl">
<h1>Link working </h1>
<h3>sandbox="allow-popups" <br/> works locally but seems not to work in this tool!?!?</h3>
<iframe src="https://picturelinktest.myportfolio.com" sandbox="allow-popups" height="350" width="200"></iframe>
</div>
<div class="fl">
<h1>Not working when both standbox directives are defined</h1>
<h3>sandbox="allow-scripts allow-popups"</h3>
<iframe src="https://picturelinktest.myportfolio.com" sandbox="allow-scripts allow-popups" height="350" width="200" ></iframe>
</div>
</body>
</html>
I'm trying to embed a podcast into my flask website, and I'd I'm using bootstrap. When I embed using bootstrap. This is the code for the embed:
<div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-Good-ekuhka"
</iframe>
</div>
It loads fine and adjusts based on the size of the window, which is what I want, but it also includes a lot of space below the actual content that pushes the rest of the content on my website down.
This is the link I'm embedding.
Is there a way to get rid of the space below the actual content in the ?
Simply add scrolling="no" to disable scrolling like this:
<div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" scrolling="no" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-Good-ekuhka"
</iframe>
</div>
You can also set the height property to get rid of all the extra space:
<div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" scrolling="no" height="100" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-Good-ekuhka"
</iframe>
</div>
The backface-visibility doesnt hide the iframe backface
I created a flip box with iframe element on both side, when flip, the iframe on the front side will overlay the iframe on back side, apply backface-visibility: hidden does not hide it backface, although it shoud be:
Codepen link
<div class="flip3D">
<div class="front">
<iframe id ="frame" width="auto" height="auto" src="https://www.youtube.com/embed/wZZ7oFKsKzY?enablejsapi=1" frameborder="0">
</iframe>
</div>
<div class="end">
<iframe width="80%" height="80%" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>
</div>
</div>
I can fix this by making the front side iframe visibility: hidden on hover. But
Question : Why backface-visibility is not working on iframe ?
You were missing transform-style:preserve-3d;?
I have a modal with pdf:
<div ng-if="$root.isie11">
<iframe src="file.pdf" class="pdf">
</iframe>
</div>
<div ng-if="!$root.isie11">
<object data="file.pdf"
type='application/pdf' class="pdf" >
</object>
</div>
As you can see if browser is IE I use iframes in other cases object. In object the pdf comes with scrollbar. Althought its only 1 page its need to be scrollable because of a modal size. In Iframe there is no scrollBar.
I tried adding : scrolling: yes with now effects
Currently the way the code works is that it places the iFrame on the bottom on the bottom. I want the last two iFrames to be next to each other so that one can hold, lets say a menu and the other can hold another web page. They would need to be adjacent to each other. That is side by side (no pun intended)
Someone suggested float : left. I tried this and it did float left but it floated the iFrame above it one to the left and not the current iFrame.
Code:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="600" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://www.w3schools.com" width="200" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen
<iframe src="http://www.w3schools.com" width="400" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
New Code:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="600" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://www.w3schools.com" width="200" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen
<iframe src="http://www.w3schools.com" width="400" height="500" float : right>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
easily done, you just need to set the display to inline-block for those two iframes.
iframe:nth-child(2),iframe:nth-child(3){
display:inline-block;
}
here's an example.
iframes are somewhat frowned upon. You might like to consider using divs with ajax instead, utilizing the jquery $.load function to load whatever you like into them. You can read up on that here.
Hope that helps...
Here is my attempt... The width of the window has to be more than 600px for the last 2 iframe to be beside each other. I used a div with clear:both; to make sure the last 2 iframe are under the first iframe
CSS:
body{
margin:0;
padding:0;
width:100%;
}
HTML:
<body>
<iframe src="http://www.w3schools.com" width="600" height="200" style="float:left;"></iframe>
<div style="clear:both;"></div>
<iframe id="test" src="http://www.w3schools.com" width="200" height="500" style="float:left"></iframe>
<iframe id="test1" src="http://www.w3schools.com" width="400" height="500" style="float:left"></iframe>
</body>
DEMO
You can set the two lower iframes to be side-by-side by giving them the display: inline-block style, as lukeocom mentioned above.
However, you should also then give them box-sizing: border-box and wrap them in a div with style display: table so that their width includes the size of the border, or else they won't line up well with the top iframe, as in lukeocom's example.
Here's what I mean:
http://jsfiddle.net/L87PE/1/
Having done that, you could even give them widths as a percentage, eg. width: 34% and width: 66%, and have them fill the whole browser:
http://jsfiddle.net/L87PE/