I have a HTML section in which i want to add a youtube video in the background but i am not able to do it.Here is the HTML to add youtube video in the background..
<div style="width:100%;">
<iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
</div>
and here is the Fiddle link..Fiddle
Please help me to add this video in the background of section..
add this to your CSS :
.container{
position:absolute;
z-index:999;
top:0px;
}
here is the FIDDLE
Related
Right now I am working with an iFrame for HTML and I am trying to center align this image. When I type in align = "middle" it doesn't seem to work. I wan to place this GIF in a website. Aligning it in the center would make it look nice.
<iframe src="http://gifyoutube.com/embed/mG9rRw" frameborder="0" scrolling="no" width='480' height='270' style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);" ></iframe>
That is not a GIF. That is a video (either MP4 or WebM (depending on your browser)) which is embedded in the iframe. It's so small and could easily be converted into a GIF, but that's not the question here.
Add this CSS to your iframe and it should align it in the middle horizontally.
display: block;
margin: 0 auto;
http://jsfiddle.net/odezpjLy/
Check out the JSFiddle above for an example.
Place it in a div wrapper, and center the item in the <div>:
#wrapper
{
text-align:center;
width:100%;
}
<div id="wrapper">
<iframe src="http://gifyoutube.com/embed/mG9rRw" frameborder="0" scrolling="no" width='480' height='270' style="-webkit-backface-visibility: hidden;-webkit-transform: scale(1);" ></iframe>
</div>
As title... Can I even do that? If so, how to? I've embedded a Vimeo video but failed to add words on it. Javascript is able to use
Many thanks
A solution with a text with an absolute position:
#video-container{
position:relative;
width:auto;
}
#foreground-text{
position:absolute;
top:50%;width:100%;text-align:center;
margin:0 auto;
color: white;font: bold 20px;
}
<div id="video-container">
<iframe src="https://player.vimeo.com/video/36477715" width="100%" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p>Things Programmers Also Know from Billy Keyes on Vimeo.</p>
<span id="foreground-text">Some text</span>
</div>
(video won't work in the snippet frame)
You can also use WebVTT subtitles:
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
http://html5doctor.com/video-subtitling-and-webvtt/
I'm working on a website and am using a presentation as a slideshow for concert images because it is easy and familiar for someone who is not programmatic proficient to edit what is shown during the slideshow. To hide the navigation i used CSS, and placed the IFrame in a div with the class .googleSlideshow.
The HTML:
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
</div>
The CSS:
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
easy enough! here comes the problem: when the IFrame is clicked, the presentation goes to the next slide and pauses! This is terrible, and since this is in an IFrame the components of the IFrame are not able to be effected by my CSS, or script. Is there an attribute I can add to the IFrame that will get passed down to the presentation and stop the image onclick navigation?
Adding rm=minimal
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000&rm=minimal" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
I have found a fix thanks to trial and error!
the HTML
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
<div style="top:0px;left:0px;width:100%;height:579px;position:relative;margin-top:-583px;" onclick="return false;">
</div>
</div>
the CSS
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
position:relative;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
the idea of a div blocking the click is what worked, but putting it after the iframe and then moving it to cover the iframe was better than placing the div before the iframe. i hope this helps others in a similar situation!
I have my HTML as below
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Top div (d1) is fixed. while scrolling bottom div(d2) goes behind top div. But youtube video
stay on top.
I want to put it behind top div. Is there a way??
The problem could be that the iframe is holding the flash youtube video on top. It has to do with the z-index of a Flash object.
I've used this solution before with success...
http://manisheriar.com/blog/flash_objects_and_z_index
Put your Flash content into a wrapper div called flash
Add to your object tag
Add wmode="transparent" into the embed tag
Use CSS to set the position and z-index for your div (don't set negative z-index values as it will hide your Flash)
Use this css:
#flash {
position: relative; /*or absolute*/
z-index: 0;
}
Edit: you would have to remove the Iframe. Wich would of bin a good idea in the first place, since iframes suck :p
That's because ActiveX objects tend to sit on top of ALL html elements. You'll have to have to add a "windowless" mode to your
<object>
<param name="wmode" value="window" />
</object>
Here is how I solved it.
<html>
<body>
<div id="d1"
style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000">
</div>
<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XZxo7IznQnk?wmode=transparent"
frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Note ?wmode=transparent" in src of iframe
What I tried when I came across similar situation:
#bridgeDIV
{
position:relative;
}
#riverDIV
{
position:fixed;
overflow-y:scroll;
}
Imagine river flowing under the bridge.
I'm trying to display an image over a video (html5). If I put an instead of the video ... it works but when I put a the video is over the image :/ What could I do ?
<div class="videohead">
<video loop="loop" autoplay="autoplay">
<source src="img/video.mp4" type="video/mp4" />
<img src="img/video.png"/>
</video>
<img src="img/logo.png" class="logo"/>
</div>
.videohead
{
margin: 5px 0 0 1px;
}
.logo
{
margin-top: -155px;
}
Link: https://jsfiddle.net/kNMnr/1487/
Use position in CSS3 with z-index.
<div id="wrap_video">
<div id="video_box">
<div id="video_overlays">Logo</div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gKiaLSJW5xI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
CSS:
#video_box {
position:relative;
}
#video_overlays {
position:absolute;
width:160px;
min-height:40px;
background-color:#dadada;
z-index:300000;
bottom:10px;
left:10px;
text-align:center;
}
you can provide the image with a certain z -index in css and set its position to absolute hope that helps...
Looks like the z-index is the problem here as the other user suggest, but just wanted to add. If you are tring to just display a picture before a video you could also use the poster attibute of the html5 video tag.
http://www.youtube.com/watch?feature=player_embedded&v=heI69L8fS6Q#at=99
There is a simple video attribute that allows the use of pre-loaded images.
The "poster" attribute defines a poster image that is in place of the video.
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.