Develop Reference

How to add a banner inside a div at the bottom?

I have this website.
I have a div with an embeded YouTube video and I am trying to hide the lower part of the video with a banner so that the YouTube logo that appears at the bottom is covered.
I have added another div for the banner, I used z-index and position: absolute; top:700px; to make it stack over the video but this makes the banner position unpredictable on all browser.
Firefox and IE looks good but it's not working well on Chrome or Safari because the banner is too low and doesn't cover the bottom of the video properly.
How else can I do this so that it works on all browsers? Basically I just need the banner to stack over the bottom of video so that it covers the area I want hidden.
Here's what I have
.embed-container {
width: 100%;
overflow: hidden;
position: relative;
margin-top: -80px;
padding-bottom: 0px;
margin-bottom: 0px;
z-index: -1;
}
.mask {
position: absolute;
top: 700px;
right: 0px;
width: 100%;
height: 150px;
background-color: #ef1446;
z-index: 11;
}
.bottom {
bottom: 0;
}
<div id="lgvid" class='embed-container'>
<div class='over'></div>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed-container'><iframe src="https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&playlist=Yo19ZhO7CAc&cc_load_policy=1rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="mask bottom">
<br><br>
<center>
<h1 style="color:white;">¿Que estas buscando?</h1>
</center>
</div>

Use Vimeo, or HTML5. If removing the YouTube logo is all you want, it's a lot less trouble doing it that way. You can download the video from Youtube, here

Another thread discusses placing a div over a youtube video, this might be what you are looking for.
How to show a div over a Youtube video (z-index)?

[SOLVED] My main problem was just that the banner was not in the same position on Chrome and Safari when using z-index to stack my divs. On these two browsers, the banner was horizontally lower than in I.E. and Firefox.
I solved the issue by using a browser specific CSS hack found here: http://rafael.adm.br/css_browser_selector/
The browser specific CSS hack allowed me to position the banner in the exact position I wanted for those two browsers where the banner was out of place. I still used z-index in all style sets for all browsers just slightly different top margins for the Chrome and Safari specific CSS.

Displaying Iframe on top of image?

Problem
I want to display an iframe within an image, but have no idea how to do this. Is there a better way than purely positioning with css?
I have a html page that displays other websites, and I would like to display an iframe within the screen of the image below on that page.

I made the screen a background image and then used a absolute positioned iframe.
i added a YouTube iframe to the screen in the demo.
Demo
.outer {
background-image: url('http://i.stack.imgur.com/6hnLq.png');
width:420px;
height:365px;
}
.inner {
position: relative;
background-color:;
left: 67px;
top: 109px;
width:277px;
height:150px;
}
............
<div class="outer"><iframe class="inner"></iframe>
you could even use a 2 or 3px border-radius to match the image.

Basically you want to place the iframe in a container that is positioned absolutely. Then place it directly over the image. Here is an example. Please note the iframe link will not work inside of the fiddle due to JS Same origin issues.
http://jsfiddle.net/weyg1opk/
<div class="image_container">
<img src="http://i.stack.imgur.com/6hnLq.png" class="preview_image">
<div class="container">
<iframe class="iframe_example" name="iframe_example">You do not have iframes enabled</iframe>
</div>
.container {
position: relative;
top: 110px;
left: 68px
}
.image_container {
width: 421px;
height: 365px;
}
.preview_image{
position: absolute;
}
.iframe_example {
width: 270px;
height: 155px;
z-index: 1000;
}

maybe you can:
Crop the image into pieces and replace the screen image with a iframe without border and fixed size
or
Use the monitor as background, and use a div with absolute position to exact match the screen size and position.

How to hide scrollbars using jquery and scrolling divs without disabling rest of page?

See my problem here:
http://jsfiddle.net/nM6DF/
I want to have divs scroll on and off the screen using jquery, but I do not want any horizontal scrollbars. The only way I know how to do that is to make a container and do overflow:hidden. Here is my container CSS
#container {
top:0px;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I had to make the width and height 100% so that no matter what I scrolled across it would not be cut off.
When I make this container then everything behind it becomes unclickable and pretty much disabled. I want the page behind the scrolling divs to still behave normally where I can click and interact with it. How can I achieve that?

How to make a div remain at the bottom of the page

I would like to put a small tab at the bottom of the page for Contact Us- that should scroll as the page scrolls and should work in Older versions of IE also like IE 5.0. Please see the page at
http://www.goshti.com/testcode.html
Any suggestions on how to solve this. I CSS or Javascript solution is both fine.

You can use position:fixed on the element.
<body>
<div class="tab">
Contact Us
</div>
CSS:
.tab {
position: fixed;
bottom: 0px;
right: 0px;
}

Have you tried position:fixed?
I'm not sure if it would work on older browsers tho.
You can wrap the bar within a relative div
#page-wrap {
margin: 15px auto;
position: relative;
}
#bar {
position: fixed;
bottom: 0px;
right: 0px;
}

Puzzle: different domain iframe needs to dynamically "overlap" parent content

This should be a fun puzzle for you Stack Overflow geniuses:
I'm building a browser plugin that will inject a div, script, and iframe into the markup of whatever page the client is viewing. The purpose is to anchor a toolbar onto the bottom of every page (StumbleUpon does this for Chrome). Here's the code that is placed before </body>:
<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
<iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>
This toolbar (iframe) will be hosted on our server and has pop-out panels. When a user clicks to open a menu, the menu vertically extends the toolbar (e.g., toolbar height is 35px; with panel is 100px).
I can accomplish this in Safari, Firefox, and Chrome by having my toolbar sit on top of everything on a transparent background (i.e., height: 100% and background-color: transparent for both the div and iframe). But this doesn't work for IE7, IE8, IE9.
I've tried (1) doing background: blank.gif instead of background-color: transparent, and (2) injecting a script into the parent with a resizing function that I could call on with parent.resizeFunction(height) ("resource denied")
Any ideas on how to solve this?? Thanks so much!

I have to run so I can't test it, but IE seems to listen to the non-standard ALLOWTRANSPARENCY property.
When the property is set to false, the backgroundColor property of the object can only be that of the window. When the property is set to true, the backgroundColor property of the object can be set to any value, including the default value of transparent.