I am using a vimeo video as a background for a div that spans the top of my page. When I have the cursor inside of that div/iframe it won't scroll the page at all. The embed code I'm using:
<div class="vimeo-wrapper" style="padding:42.75% 0 0 0;"><iframe
src="https://player.vimeo.com/video/288403366?
autoplay=1&loop=1&title=0&byline=0&portrait=0&background=1"
style="position:absolute;top:-10px;left:0;width:100%;height:100%;"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
allow="autoplay; fullscreen"></iframe></div>
I've tried putting overflow on both the iframe and the vimeo-wrapper div but neither seemd to help.
Solved by putting z-index: -1 on the vimeo-wrapper div
Related
I'm having a hard time making the Vimeo player display in the proportion I want. I need the video to stretch to take the entire div (notice the red background of the div). This is the code for the embedded video
<Container>
<iframe
src={`https://player.vimeo.com/video/76979871?h=8272103f6e&autoplay=true&controls=false&loop=true&muted=true`}
frameBorder="0" allow="autoplay; fullscreen" allowFullScreen
></iframe>
</Container>
Here is a plunker for an example:
http://jsfiddle.net/41sdho4w/
<div>
<iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
</div>
video, iframe {
box-sizing: border-box;
background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
background-size: contain;
padding: 4.9% 17.5% 7.8%;
}
I would like to overlay the video inside the laptop (not the whole video tag) with some content (img). How would I go about that?
Ultimately, when the overlay is clicked, the video would reveal itself and start playing. Bonus points for a solution that keeps this in mind!
http://zerosixthree.se/create-a-responsive-header-video-with-graceful-degradation/
This tutorial answers your question....
i'm opening a website in an iframe (using a bootstrap modal) and
i know that there will be a vertical overflow in that iframe.
Because there is a navigation bar of 200px on the left site on that opened website
i want to auto scroll 200px to the right.
does somebody know how to handle that?
Put the iframe in a div with overflow:hidden;
iframe style margin-left:-200px;
Problem solved, do you need an example or is the problem resolved with this answer?
UPDATE
<div style="overflow:hidden;">
<iframe src="http://floradetuinen.nl/" width="900" height="900" style="margin-left:-200px">
</div>
I have a form from Google docs that I embedded in my website I want the students I coach to fill out but the scrollbar is annoying me. Any way to get rid of it?
<iframe src="https://docs.google.com/forms/d/1kMdmk_f4jrAWwZi6q3YD63oUQAg2hvdheAQ-pY_2FRY/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
use scrolling="no"
<iframe src="https://docs.google.com/forms/d/1kMdmk_f4jrAWwZi6q3YD63oUQAg2hvdheAQ-pY_2FRY/viewform?embedded=true" width="760" **scrolling="no"** height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
I'm not sure if it's the single scroll bar, or the double scroll bar that's annoying you...depending on the form you're embedding, some sections may be larger than others and they'll need to scroll to continue the form.
I'm very noob here, but fixed a naggy double scroll bar issue for a wix site using their html embed tool...
Taking the google form embedding code, I added the "style" sheet at the beginning and changed height and width to "100%" see here:
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<iframe src="YOUR SOURCE" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
I have found if you change the height of your form to say 2000 your form fits on your website without the scroll
e.g. width="650" height="2000"
You can try css: overflow-y: hidden;
I've got a page which I need to serve via an iframe, but I need to only display part of the page, not the whole thing.
My current code is:
<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>
I thought that the best option would be to serve the iframe within a containing div that has "overflow:hidden" so that it acts like a picture frame. That works, but the problem is that the content I want to show is in the middle of the iframe page and the div is always assuming that 0,0 is the start of the frame. I need to position the iframe so that the div is exactly over the part of the page I want to be visible.
Can I do this?
Use negative values for margin-top and margin-left to position the iframe. Look at the code below:
<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe style="margin-top:-100px;margin-left:-100px" height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>
In the content to appear within the iframe, if you can set an element with an id that marks the very top of the portion of content you want to peak through, then you can set the iframe's src attribute with that anchor on the url
iframe content's HTML:
[a bunch of markup/stuff that you don't want to show]
....
<div id="topOfVisibleArea"></div>
[more markup]
iframe tag:
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/#topOfVisibleArea"
width="500px"></iframe>
UPDATE -- BETTER APPROACH:
Or you can just use absolute positioning on the iframe within the div. You'll need the iframe's height and width to be wider and taller in than the window you're fitting it in to accomodate the offsets.
See this example: http://jsfiddle.net/sNSMw/
<iframe name="itunes" src="http://itunes.apple.com/us/album/threads/id509846713" frameborder="0" width="500" height="600" onload="window.frames['itunes'].scrollTo(250,250)"></iframe>
Trick is all in the iframe style parameters. Placing in additional containers will help with alignment requirements.
<div style="border: 1px solid red; width: 70px; height: 20px; overflow:
hidden;"><iframe style="width: 400px; height: 800px; margin-top: -200px;
margin-left: -200px;" src="http://www.amazon.co.uk/product-reviews
/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&
sortBy=bySubmissionDateDescending" width="320" height="240"></iframe>
</div>
Credit to spamtech.co.uk for the help and examples: http://spamtech.co.uk/tips/position-content-inside-an-iframe/