Iframes in HTML noob - html

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

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>

Embedding MS Form iframe scrolling="no" does not work

I am trying to embedthis MS Form into SquareSpace but I get 2 scroll bars in the page (one for browser and one for this form).
<iframe width="460px" height= "1000px" scrolling="no"
src= "https:...&embed=true"
frameborder= "0" marginwidth= "0" marginheight= "0" style= "overflow:hidden; border: none; max-width:100%; max-height:100vh"
allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>
I was wondering if there is a way to remove the scrollbar for the form and have only the browser scoller? Obviously the page gets a longer scroll depending on size of the form in each step
Thanks a lot in advance
Yup, add this attribute to your iframe:
scrolling="no"
example:
<iframe src="http://iFrameSource.com" scrolling="no" style="width: 550px; height: 500px; overflow: hidden;" ></iframe>
Source: Remove scrollbar from iframe
You can do it by adding following CSS.
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<body>
<iframe height="100%" width="100%"
src="yourframe1.html"></iframe>
<iframe src="yourframe2.html"
width="100%" height="100%"></iframe>
</body>

Wordpress Video Align middle not working

I have a problem with one WordPress theme.
This is URL of my site and if you scroll down to the iFB section
then you will see a video there.
I have entered this code to put it to this page
<iframe
src="https://www.youtube.com/embed/KO2hFoKDh18"
width="560"
height="315"
frameborder="0"
align="middle"
allowfullscreen="allowfullscreen"
></iframe>
but still going left.
Anyone that can help me?
<iframe src="https://www.youtube.com/embed/KO2hFoKDh18" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
element.style {
margin-left: 400px;
}
if you want to align your data than you can align it many ways. align center was not working do you to inheritance so you could it with css. make a class here style. so in script tag you can give margin-left so it will move towards right adjust as you need.
.style {
margin-left: 400px;
}
</style>
<iframe class="style" src="https://www.youtube.com/embed/KO2hFoKDh18" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Removing excess whitespace - CSS

I've created a form which includes a selection of won awards.
However due to the layout options (I'm using Hubspot) there is a large space between the awards and form.
You can see the form at: http://content.workbooks.com/free-trial-workbooks-crm?hs_preview=w1at_hmF-2371060669
I'd like to remove the excess whitespace to achieve the following:
Use height="325px":
<iframe src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial"
width="600px" height="325px" frameborder="0" scrolling="no"
style="overflow: hidden;">
</iframe>
You need to lower the height of the iFrame.
Simple solution
HTML
<iframe id="iframeWithoutScroll" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial"
width="600px" height="320px" frameborder="0" scrolling="no" style="overflow:hidden">
</iframe>
CSS
iframe#iframeWithoutScroll html {
overflow: hidden;
}
Well this SOLVE the problem !! Actually html set to overflow: auto;.
In some browser you might have scrolling. So for this go-to-here.

Hide a image behind a border in html, css

I wish to hide a video behind a border and appreciate any help I can get. This is what I have now with the image above the border.
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;">
<iframe width="550" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
try this give iframe width 100% and wrap it inside div like this
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;">
<iframe width="100%" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
add to div style:
style="position:relative;overflow:hidden;width:550px;height:315;"
I don't think what you try to do is allowed by youtube.
but you can just say this on the iframe:
style="visibility=hidden;"
Although it violates the Youtube Terms of Service, just to answer how to do it for the sake of knowledge
This will be your HTML
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;" class="yt-vid">
<iframe width="550" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
in your CSS
.yt-vid > iframe {
position: relative;
z-index: -1;
}
I do not encourage you to do this. You should not do this actually.
You can use style="visibility: hidden;" css tag in iframe. Or just give 0 (zero) width to iframe.