I'm having the following iframe:
<iframe id="uploader" src="/fileuploader"></iframe>
When it's loaded, there are multiple div elements - I want one of them to be layered on the top of the iframe.
<iframe id="uploader" src="/fileuploader">
[..]
<div class="modal preview"> <---- I want this to be positioned over iframe
<div class="modal-body">
<img src="myimage.jpg" alt="Image">
</div>
</div>
[..]
</iframe>
Preview:
Looks like this is impossible to achieve since nothing works.
What have I tried:
Setting z-index on iframe and the div
Playing with the positions
Playing with iframe transparency
Question:
How can I z-index an element located inside of the iframe over it?
Related
I have a website using bootstrap and on the core of my page I have a picture and below is a youtube video embeded:
<div class="col-xs-12 col-sm-12">
<a href="tech.php">
<img class="img-responsive img-rounded" src="assets/tech_withText.jpg" alt="Generic placeholder image" width="1200" height="600">
</a>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/RTwv1Dn2rYQ" width="300" height="150" frameborder="0" autoplay=1 allowfullscreen></iframe>
</div>
</div>
Link to website here.
When I first load this page what I see with this solution (and dislike) is that my video extends below my screen. So I am after a way to state the size of my picture and video as a ratio of the screen size, so that my video resizes to stay within the boundaries of the screen.
I have looked for ideas on the internet (i.e. css edit as in here) but I get lost or it does not do what I expect.
Any idea?
If you just add a CSS entry to specify the minimum height of the video it will not clip it on load and bootstrap will take care of keeping it in ratio on resize. Code:
.embed-responsive{
min-height:100%;
}
Of course you will probably want to target the div a little more specifically but I think this should do what you are after.
I would go about this differently, I wouldn't use an absolute positioned element for video and I would set a height or min-height to use viewport units vh
So it might look like:
#youtube-video {
width: 100%;
min-height: 40vh;
}
And remove all the absolute positioning on that element.
Additionally you might want to set an ID or class on your top container and give it some margin-top to offset your fixed header:
#top-container {
margin-top: 50px;
}
Lastly I would move the footer outside the bootstrap container completely by moving the </div> to be above your footer.
<div class="container">
....
</div>
<footer class="footer">
...
</footer>
having an issue, it's early in the morning so it's probably very simple! basically this is my code:
<div class="form-group">
<label>Preview</label>
<div style="border:1px solid black; height:2px!important;"class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="//player.vimeo.com/video/{{$video->link}}"></iframe>
</div>
</div>
For some reason I cannot set the height of the video div. Currently the problem is that the iframe is sized correctly, but the containing div has an unnecessary height which is pushing the form submit button down out of the user's view. I would like to be able to adjust the height of the div
How to make an image fit perfectly in an iframe without having to scroll.
below is an example of my code
<iframe style="display:inline"src="../assessm2/images/social3.jpg" frameborder="0" name="frame 2"></iframe>
</center><br/>
</div>
<div id="text">
<a href="../assessm2/registration.html" target="frame 1" >Show</a>
Hide  
Show
Hide</p></div>
For some reason my iframe height is constrained, whether I set it in CSS or in the tag. I'm not sure what this is all about and searches reveal nothing. I'm not sure what to do at this point and may need to abandoned the embeds. Also, when I force the container to 960px (the height of the video) it will get a scroll bar with no overflow options defined. Weird.
http://jordan.rave5.com/tmpstuff/
<div class="left-large-box">
<div class="large-box">
<div class="large-box-content">
<div class="content-full">
<div class="column-header">
<div class="column-icon">
Title here
</div>
</div>
<p><iframe width="690" height="388" src="http://www.youtube.com/embed/jH7f6e9FsLc" frameborder="0" allowfullscreen></iframe></p>
</div>
</div>
<div class="box-end"></div>
</div>
</div>
In your style sheet blue.css you apply height: auto; to all elements, that overrides the height attribute of the iframe. You can still use a style on the element to set the height though.
If you remove the height: auto, the height attribute works also.
On this page an embedded YouTube video is displayed to the left of a carousel titled "Similar Festivals". The HTML used to embed the YouTube video is:
The HTML of the YouTube section is:
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe width="1000" height="1000" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
The layout of the page (using a responsive Bootstrap grid) is such that the video should have the same height as the carousel to the right of it, but as you can see, it is somehow breaking out of its parent container. I want the video to be aligned with the carousel to its right, how can I fix this.
Here's a screenshot in case there's any doubt about what I'm referring to!
I've noticed that row-fluid container is dynamically adding a width of 33% to your Youtube video. So whatever width expectation you set to it is being reset by that class.
Try this:
<div class="row-fluid">
<div class="span4 spacer twitter">
</div>
<!-- Youtube -->
<div class="span4 spacer youtube">
<div class="title clearfix">
<h2 class="pull-left">YouTube</h2>
</div>
<iframe height="150px" src="http://www.youtube.com/embed/NI8rQEHoE24"></iframe>
</div>
<!-- Similar Carousel -->
<div class="span4 spacer">
<div id="similarCarousel" class="carousel slide last">
</div>
</div>
</div>
(hat tip to Mr. Alien)
It sets the iframe height only. The whole row-fluid container expands somewhat, and the height is irregular. However, you don't have the 'jumping outta the container' problem.
Instead of
<iframe id="fitvid811516"
src="Festivals.ie%20_%20Electric%20Picnic%202012_files/NI8rQEHoE24.htm">
</iframe>
Use this
<iframe width="640" height="360"
src="http://www.youtube.com/embed/NI8rQEHoE24?feature=player_detailpage"
frameborder="0" allowfullscreen>
</iframe>
And adjust width and height manually. Iframes don't go along well with dynamic sizing.
Also if you don't want to break the layout but also don't want to change the content within, you can also go to the parent container in HTML and set overflow: hidden
.fluid-width-video-wrapper {
overflow:hidden;
}
Note that this would fix your layout but break the iframe; its bottom parts where play controls stay would be hidden.