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>
Related
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
I'm having trouble centering the embedded bandcamp player on my webpage. Here's what I'm trying;
<div class="embed-responsive embed-responsive-4by3">
<iframe style="margin:0 auto" class="embed-responsive-item" src="https://bandcamp.com/EmbeddedPlayer/album=2135428685/size=large/bgcol=ffffff/linkcol=0687f5/tracklist=false/artwork=small/transparent=true/" seamless></iframe>
</div>
I've tried a few different style parameters (display:block, auto, etc.), and had no luck. The player is locked to the left side of the div.
This is not an issue with the YouTube or Soundcloud embedded players. I use the same code as above, but leave out the style="" section.
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/
I have an iFrame that uses a background image on behind it. On Firefox, the background is transparent and I can see the background image. On IE the background in the Iframe defaults to white. Is there a fix for this?
Example:
<td width="80px" class="voting" align="center"><div id="votingIframeDiv">
<iframe id="votingIframe" frameborder="0" allowTransparency="true" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="80" height="70" scrolling="no" src="vote/index.php?userid=89&fishid=<?php echo $row['id'];?>" >
</iframe></div>
</td>
Is there a fix for this?
Yes, IE has the non-standard allowtransparency property.
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true">
</IFRAME>
Be sure both the IFRAME and its source BODY element have a background:transparent style rule applied:
<iframe id="votingIframe" frameborder="0" allowTransparency="true" style="background:transparent" ... ></iframe>
and in the source:
<body style="background:transparent">
PS: CSS styles above are inline just for example.
Yes you can fix this but it also depends upon the iframe's origin's style sheets, If the iframe's source has a bg set in CSS this will override allowTransparency="true"
This may be a long shot but try putting allowTransparency="true" at the end of the iframe tag.
Note: In my testing allowTransparency has not worked in IE6.
After putting allowTransparency='true' if you're not getting any love try making sure that your style="background:transparent" .