Playing a video inside an image - css

my question is related to this this question
<div id="tv_container">
<video width="300" height="240" controls>
<source src="Spin1038.mov" type="video/mov">
Your browser does not support the video tag.
</video>
</div>
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
#tv_container video {
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
I am doing the same thing. The its not working and even if I remove the image, the video isn't working even then as well.
This is my page.


Change #tv_container:after { z-index: -10 }
Also changed the <video width='245'....>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -10; /* This should be lowest z-index value */
}
#tv_container video {
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
</style>
</head>
<body>
<div id="tv_container">
<video width="245" height="240" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4"></video>
</div>
</body>
</html>

Related

keeping text on an image while making hover effect css

I need to put some text on the pic and it has to stay there forever in that exactly color. I did it, but when I hover on a pic - text disappears. What should I do?
Didn't find answer.
I want text being there all the time with and without hovering. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay{
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
}
</style>
</head>
<body>
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>
</body>
</html>

Add the z-index property to your text.
Information here
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>

Resizing and HTML Video

<!-- Header -->
<header id="top">
<video autoplay loop poster="towkio.png" style="height:675px; width:100%" id="bgvid">
<source src="towkio.mp4" type="video/mp4">
<span id="logo">
<img src="img/logo.png">
</span>
</header>
I would like to make the height 675px, and still have it span the full width it acts quite weird.
http://shearelegancechicago.com/todd/

Do you mean something like that?
#video-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#video-bg > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 635px;
z-index: 1;
}
#media (min-aspect-ratio: 16/9) {
#video-bg > video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
#video-bg > video {
width: 300%;
left: -100%;
}
}
#supports (object-fit: cover) {
#video-bg > video {
top: 0; left: 0;
width: 100%;
height: 635px;
object-fit: cover;
}
}
#logo img {
position: fixed;
top: 50px;
left: 0;
z-index: 2;
width: 50px;
height: 50px;
}
<header id="video-bg">
<video autoplay loop poster="towkio.png" id="bgvid">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</header>
<span id="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png">
</span>
Here is live demo.
Source. I just changed height of video, and that added logo with help of z-index.

Div won't overlap iframe docx/pdf in IE

How do I get the green div to overlap my DOCX or PDF IFrame in IE? Using z-indexes doesn't work.
<html>
<head>
<style>
html, body {
width: 100%;
height: 100%;
}
#container {
position: absolute;
top: 25px;
left: 50px;
right: 50px;
bottom: 25px;
overflow: hidden;
z-index: 1;
}
#overlap {
background-color: green;
position: absolute;
height: 100%;
width: 250px;
overflow: hidden;
right: 0;
z-index: 10;
}
</style>
</head>
<body>
<div id="container">
<iframe height="100%" width="100%" src="Test.docx"></iframe>
</div>
<div id="overlap">
</div>
</body>
</html>

How to stack an overlay over html5 video

I have attempted the answers found here but still cannot fathom how to overlay a images and text over html5 video. Whatever I try the elements simply stack above or below one another. The code is as follows:
HTML:
<html>
<body>
<div id="wrap_video">
<div id="video_box">
<div id="video_overlays">
<img src="img/overlay.png"</img>
<a> TEXT </a>
</div>
<div>
<video id="player" src="mov/movie.mp4" type="video/mp4" autoplay="autoplay" loop>">Your browser does not support this streaming content.</video>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0px;
}
#video_box {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
}
#video_overlays {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
z-index: 100;
}
video#player {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
z-index: 99;
}
#wrap_video {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
}

<div id="wrap_video">
<video id="player" width="960px" height="720px" loop="loop">
<source src="mov/movie.mp4" type="video/mp4"/>
<source src="movie.ogg" type="video/ogg" />
Your browser does not support this streaming content.
</video>
<div id="video_overlays">
<img src="http://images.apple.com/v/ios/carplay/a/images/carplay_icon.png"/>
TEXT
</div>
</div>
css
html, body {
margin: 0px;
}
#wrap_video {
position: absolute;
top: 0;
left: 0;
}
#video_overlays {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
z-index: 100;
background-color: rgba(255,255,255,.4);
}
#player{
background: purple;
}

Responsive Iframe Background

i'm trying to code a television-like-youtube-video. But it seems bad in other resolutions.
Here's my fiddle: http://jsfiddle.net/QRkL9/3/
And here's my code:
HTML
<div id="wrap-video">
<img src="http://www.spotcularcarsisi.org/wp-content/uploads/2013/06/lg-tv.jpg" />
<div id="video">
<iframe src="//www.youtube.com/embed/W8vlVksDTe8" frameborder="0"></iframe>
</div>
</div>
And here's my CSS:
#wrap-video {
position: relative;
padding-bottom: 56.25%; /* 4:3 */
padding-top: 25px;
height: 0;
}
#wrap-video img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video {
position: relative;
padding-bottom: 56.60%; /* 4:3 */
padding-top: 0;
height: 0;
}
#video iframe {
position: absolute;
top: 0;
left: 5%;
width: 90%;
height: 77%;
}
Thanks for any solution or help.

Resources