Space Below <iframe> in Flask with Bootstrap - 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>

Related

Height setting from the embed or link code in Css

How to make height settings from the embed link for video background under the header, such as this website: https://www.videvo.net/, I own embed link video that is very responsive, and the change height in this link:<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>
Welcome to Stack Overflow!
Remove padding-bottom and set the height and you should be good to go!
<div style="width:100%;height:100px;position:relative;">
<iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;">
</iframe>
</div>

Soundcloud breaks entire website below the embed?

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>

How can I make an iFrame next to another iFrame?

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/

Iframes in HTML noob

My (fan) website has this code so far. I want the crop I have specified (-360px on the top and -50px to apply to each iframe, but no matter WHAT I do the other three iframes do not have the crop). Is there a way to make the crop apply to all the iframes? I am completely lost. :(
<div style="overflow: hidden;
margin-top: -360px;
margin-left: -50px;">
<iframe src="http://dragcave.net/view/XD" frameborder="0" width="750" height="450" " scrolling="no"></iframe>
<iframe src="http://dragcave.net/locations/XD" frameborder="0" width="750" height="450" " scrolling="no"></iframe>
<iframe src="http://dragcave.net/locations/XD" frameborder="0" width="750" height="450" " scrolling="no"></iframe>
</div>
iFrames only show the whole page, there's not really any way for you to only show part of a page in an iframe.
What you need to do is some jquery trickery, which you can find here: iframe to Only Show a Certain Part of the Page

Embedded vimeo videos will not play on iPad

Hers is the url: http://greyhawkfilms.com/whatwedo.html
It plays fine on the iPhone, but when I try to play it on the iPad only the audio plays and no video.
The embed code I'm using is here:
<iframe id="iframe1" src="http://player.vimeo.com/video/57884624" width="768px" height="432px" frameborder="10px" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
This problem seems to be caused by hiding the Vimeo player. I see that you do this in your code:
<div id="about-1-VP" style="display: none;">
<div class="videoplayer">
<div class="closevp"><span class="closevpbutton">(x) CLOSE</span>
</div>
<iframe id="iframe1" src="http://player.vimeo.com/video/57884624" width="768" height="432" frameborder="10" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>4
To avoid this issue, try using another method to hide the iframe element instead of display:none, for example attaching a class that positions the element off-screen, eg
.special-hide
{
position: absolute;
left:-99999px;
}
Then remove the class when it's time to display the Vimeo player.