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;?
Related
I have a page that has an iframe in it. for styling, I'm using tailwind-css. Now I have two scrollbars - iframe inner scroll and browser'scroll, I want to hide the inner scrollbar of the iframe and scroll with the browser scrollbar. I tried to use scrolling="no" and the inner scrollbar is removed but the browser scroll is stuck and the iframe is not fully displayed
<div className="h-full overflow-scroll>
<iframe
src={url}
frameBorder="0"
width="100%"
scrollbar="no">
</iframe>
</div>
Do you have any idea how can I do this? Thank you in advance
set the height to fit the content and disable the scrollbar
<div className="h-full overflow-scroll>
<iframe
src={url}
frameBorder="0"
width="100%"
height="640px"
scrollbar="no">
</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 would like to put both my YouTube videos on the same line. I tried adjusting the iframe and creating a wrapper, but it doesn't seem like I'm targeting the right things. I'm not sure where I went wrong. Here's my JFiddle: https://jsfiddle.net/6a73m27n/
.content {
margin-top: 15px;
}
iframe {
float: left;
}
<div class="video_wrapper">
<iframe width="400" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
<iframe width="400" height="300" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>
</div>
Just mention the width of the video in percentage as shown below:
<div class="video_wrapper">
<iframe width="40%" height="200" src="https://www.youtube.com/embed/3S_dmC2soik" frameborder="0" allowfullscreen></iframe>
<iframe width="40%" height="200" src="https://www.youtube.com/embed/bdGhmMzj4uE" frameborder="0" allowfullscreen></iframe>
It actually works if you have enough width for both of them on one line.
Despite that, I would recommend you to put this styling to the iframe instead:
iframe {
display: inline-block;
vertical-align: top; /* or middle, bottom, baseline by your preference */
}
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/
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