Soundcloud breaks entire website below the embed? - html

I'm using Foundation on this website, I'm not sure if that's part of the issue, but I'm trying to embed Soundcloud into my client's website and it breaks the entire site that is below the embed! Any ideas why? I'm not sure what info you need other than this, let me know!
Here is the embed code:
<div class="large-12 columns">
<iframe width="600px" height="600px" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/109522071&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" class="soundcloud">
</div>
And below this I basically just have a footer, but it even cuts off some
< br > tags that I have. Any ideas?

Add in the closing iframe tag.
<div class="large-12 columns">
<iframe width="600px" height="600px" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/109522071&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" class="soundcloud"></iframe>
</div>

Related

Resizing iframe in squarespace to fit any screen size

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>

iframe sandbox not respecting multiple allow permissions

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>

Space Below <iframe> in Flask with Bootstrap

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>

Positioning iframe

So I have this iframe code that centers iframe content. It is working, but it stays on the top of the page, how could get it more down?
<h3 style="text-align:center;" >
<iframe src="http://88.90.5.113:12/customexportfile.htm" width="200"
height="100" frameBorder="0" ></iframe>
</h3>
Have you tried something like this: margin-top: 20px;?

Embedded Youtube player not responding in Chrome

I'm using CSS to stylize a website and have an embedded youtube clip inside of several DIVs like so:
<body>
<div id="wrap">
<div id="outer">
<img src="images/sidebar.png"/ class="sidepic">
<div id="look">
<iframe width="500px" class="youtube-player" type="text/html" height="280px" src="http://www.youtube.com/embed/J-U9aYeLvX0?wmode=opaque&feature=player_profilepage&showinfo=0" frameborder="0" allowfullscreen seamless></iframe>
<img src="images/content-01.png" class="bigpic" />
</div>
</div>
</div>
This works fine in Internet Explorer, but doesn't work in Chrome. The video doesn't detect any hover or clicking, as though it's a static image or hidden.
I've tried to use the ?wmode=opaque / transparent tags recommended in other threads on this site, but it doesn't seem to work. Removing the iframe from the DIV tags allows the video to play, but distorts the rest of the page.