I'm looking put put some text over google drive embedded player (using iframe)
CSS & HTML:
#over {
position: absolute;
top: 0px;
left: 0px;
background-color: #FF0000;
height: 30px;
}
<div>
<div id="over">This is Preview</div>
<iframe src="https://docs.google.com/file/d/0B5GSymfNadlIV1NJRFpITWJLNHc/preview" width="640" height="480"></iframe>
</div>
But the text is not overlaying the video player on my site. I'm working on wordpress mh-joylite theme. Please suggest me, point my mistakes.
Wrap your video iframe and floating text and make the parent position: relative, like so:
.video {
position: relative;
display: inline-block;
/* ie7 inline-block support */
*display: inline;
*zoom: 1;
}
#over {
position: absolute;
top: 0px;
left: 0px;
background-color: #ff0000;
}
<div class="video">
<div id="over">This is Preview</div>
<iframe src="https://docs.google.com/file/d/0B5GSymfNadlIV1NJRFpITWJLNHc/preview" width="640" height="480"></iframe>
</div>
Related
To begin with - I'm CSS / HTML beginner so something that might be obvious for you - for me is just not :) Would really appreciate your help.
I'm having a problem regarding positioning of the text on responsive YouTube embed.
What I'm trying to accomplish is:
responsive Youtube video that scales well for all resolutions - it works well
text should be placed on top of the Youtube embed - right now it disappears in back
text should be position in the same place in relation to video embed (for all the resolutions) - in my final example text should be placed on right, approx 25% up from the bottom end of the Youtube embed
I want to have access to Youtube embed controls (e.g. pausing on click and so on) so any layer covering youtube embed won't be OK
I would prefer a solution of html/css (without any additional js)
Source that I have is the following:
.video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
/* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
<div class="text">
<h1>
Example text
</h1>
</div>
</div>
If some of you guys would be able to help with text positioning, I'd really appreciate
Your attempt is super close. We just need to position the .text element absolutely and use some right and bottom properties to align it. In the example below I've used:
.text {
position: absolute;
color: white;
right: 5%;
bottom: 25%;
}
I've also changed the .text color to white so it's visible, but this could be changed depending on the colors in the video.
.video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
/* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.text {
position: absolute;
color: white;
right: 5%;
bottom: 25%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
<div class="text">
<h1>
Example text
</h1>
</div>
</div>
Hi I built a responsive theme to embed vimeo videos.
Here is my CSS:
.vimeo-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
And here is my html:
<div class="vimeo-container">
<!-- video iframe goes here -->
</div>
It works well and is responsive. Now I want to keep this responsiveness but make this video look like a background, so I thought of adding an overlay with text on top of it. Something like what is done on this Site.
How to keep the responsiveness and add an overlay with text to make it similar to the mentioned site above?
For the overlay, you can add an absolutelty postionned DIV inside your container. I changed your CSS a bit to make it more fullscreen-like and more responsive by giving a Fixed position to the vimeo-container, because I saw that there was padding at the bottom and we could see the white background of the body.
JSFIDDLE EXAMPLE
HTML:
<div class="vimeo-container">
<div class="overlay">
<div class="text-container">
<h1>Hello World!</h1>
</div>
</div>
<iframe src="https://player.vimeo.com/video/34905657?color=0fb0d4&title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p>Cowboy's Cat from Animade on Vimeo.</p>
</div>
CSS:
.vimeo-container {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
max-width: 100%;
}
.vimeo-container .overlay{
position: absolute;
width: 100%;
height:100%;
background:#000;
opacity:0.5;
z-index:999;
}
.vimeo-container .overlay .text-container{
width:100%;
text-align:center;
}
.vimeo-container .overlay .text-container h1{
color:#FFF;
text-transform:uppercase;
}
.vimeo-container iframe,
.vimeo-container object,
.vimeo-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Since your video container already have position: relative, you can set position:absolute for you layer over video:
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
Here is a working fiddle exampple with your code: https://jsfiddle.net/Munja/d8w4o31k/
Also, you can take a look on this fiddle example with video playing in bg: https://jsfiddle.net/Munja/dpfzhw1v/ I used exactly this thing on one website I was working on some time ago.
When my browser window is shrunk the YouTube video in my main div doesn't shrink with the browser. I tried some code I found online that was going to "solve" the problem, but it never turned out well and didn't look good. My biggest problem with it, was that the video never stayed centered as the browser window shrunk.
This is the code from the website:
HTML:
<div class="video-container">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Question: Does anybody know how I can have an embedded YouTube video be responsive while staying centered (both vertically and horizontally) in the div that it's located in?
Here is my code: http://jsfiddle.net/MyersAN/xk700bng/
I tried with this class
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
and add div element with youtube embedded code
<div class="videowrapper">
<iframe width="560" height="349" src="link" frameborder="0" allowfullscreen></iframe>
</div>
It works, also you should follow this tutorial with demo code.
I would like to use a video as background in CSS3. I know that there is no background-video property, but is it possible to do this behavior. Using a fullsize video-tag doesn't give the wanted result, cause there is content that need to be displayed over the video.
It need to be non JS. If it is not possible then I need to do changes on my serverside an give as result also a screenshot of the video.
I need the video to replace the colored boxes:
The colored boxes are atm just, CSS boxes.
Pure CSS method
It is possible to center a video inside an element just like a cover sized background-image without JS using the object-fit attribute or CSS Transforms.
2021 answer: object-fit
As pointed in the comments, it is possible to achieve the same result without CSS transform, but using object-fit, which I think it's an even better option for the same result:
.video-container {
height: 300px;
width: 300px;
position: relative;
}
.video-container video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 0;
}
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
z-index: 1;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
<div class="video-container">
<video autoplay muted loop>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
Previous answer: CSS Transform
You can set a video as a background to any HTML element easily thanks to transform CSS property.
Note that you can use the transform technique to center vertically and horizontally any HTML element.
.video-container {
height: 300px;
width: 300px;
overflow: hidden;
position: relative;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
z-index: 1;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
<div class="video-container">
<video autoplay muted loop>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
Why not fix a <video> and use z-index:-1 to put it behind all other elements?
html, body { width:100%; height:100%; margin:0; padding:0; }
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video id="video" style="width:100%; height:100%">
....
</video>
</div>
<div class='content'>
....
Demo
If you want it within a container you have to add a container element and a little more CSS
/* HTML */
<div class='vidContain'>
<div class='vid'>
<video> ... </video>
</div>
<div class='content'> ... The rest of your content ... </div>
</div>
/* CSS */
.vidContain {
width:300px; height:200px;
position:relative;
display:inline-block;
margin:10px;
}
.vid {
position: absolute;
top: 0; left:0;
width: 100%; height: 100%;
z-index: -1;
}
.content {
position:absolute;
top:0; left:0;
background: black;
color:white;
}
Demo
I believe this is what you're looking for. It automatically scaled the video to fit the container.
DEMO: http://jsfiddle.net/t8qhgxuy/
Video need to have height and width always set to 100% of the parent.
HTML:
<div class="one"> CONTENT OVER VIDEO
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
</div>
<div class="two">
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video> CONTENT OVER VIDEO
</div>
CSS:
body {
overflow: scroll;
padding: 60px 20px;
}
.one {
width: 90%;
height: 30vw;
overflow: hidden;
border: 15px solid red;
margin-bottom: 40px;
position: relative;
}
.two{
width: 30%;
height: 300px;
overflow: hidden;
border: 15px solid blue;
position: relative;
}
.video-background { /* class name used in javascript too */
width: 100%; /* width needs to be set to 100% */
height: 100%; /* height needs to be set to 100% */
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
JS:
function scaleToFill() {
$('video.video-background').each(function(index, videoTag) {
var $video = $(videoTag),
videoRatio = videoTag.videoWidth / videoTag.videoHeight,
tagRatio = $video.width() / $video.height(),
val;
if (videoRatio < tagRatio) {
val = tagRatio / videoRatio * 1.02; <!-- size increased by 2% because value is not fine enough and sometimes leaves a couple of white pixels at the edges -->
} else if (tagRatio < videoRatio) {
val = videoRatio / tagRatio * 1.02;
}
$video.css('transform','scale(' + val + ',' + val + ')');
});
}
$(function () {
scaleToFill();
$('.video-background').on('loadeddata', scaleToFill);
$(window).resize(function() {
scaleToFill();
});
});
How is it possible to lay an iFrame that has a black background and is slightly transparent on top of a html page so it kinda darkens the page.
I have this so far and its not working.
<iframe id="fade" src="fade.html" frameborder="No" style="FILTER: chroma(color=#000000)" allowtransparency="true">
<p>Your browser does not support iframes.</p>
</iframe>
fade.html
<html>
<body style="background:transparent">
</html>
If you just want to place a translucent box over some elements, try positioning a div with the right z-index and opacity properties:
HTML
<p>I sit in the background and get covered up by a box.</p>
<div id="shade"></div>
CSS
#shade {
background-color: red;
opacity: 0.7;
position: absolute;
top: 0px;
left: 5px;
width: 50px;
height: 50px;
z-index: 5;
}
p {
position: absolute;
z-index: 1;
}
See an example on jsfiddle.