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;
}
Related
I have included a code snippet, I'm trying to position the header and footer so that it is inside of the .main div.
I have no idea why this isn't working. Instead it is spanning across the whole of the viewport.
In this particular layout I can't determine the left position of the parent without JavaScript and I wish to keep it at CSS.
The header and footer should stay in the same place as they are when scrolled.
.main {
position: absolute;
left: 60px;
right: 0px;
top: 0px;
height: 50000px;
background-color: #09f;
}
.parent {
position: relative:
width: 100%;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #f00;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #f00;
}
<div class="main">
<div class="parent">
<div class="header">
<h3>header</h3>
</div>
<div class="footer">
<h3>footer</h3>
</div>
</div>
</div>
Thanks for any help in advance,
Jamie
As I wrote in the comment under question, fixed width is counted to viewport, not the parent element. But you can set left: 60px (the same value as content has) to fixed elements.
.main {
position: absolute;
left: 60px;
right: 0px;
top: 0px;
height: 50000px;
background-color: #09f;
}
.parent {
position: relative:
width: 100%;
}
.header {
position: fixed;
top: 0;
left: 60px;
right: 0;
background-color: #f00;
}
.footer {
position: fixed;
bottom: 0;
left: 60px;
right: 0;
background-color: #f00;
}
<div class="main">
<div class="parent">
<div class="header">
<h3>header</h3>
</div>
<div class="footer">
<h3>footer</h3>
</div>
</div>
</div>
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>
<!-- 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.
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.
Sorry, I know that's a really bad title, but I couldn't come up with a better one.
I'm trying to lay out this website using purely CSS. Previously this had been accomplished using javascript, but I know that it can be done with just CSS.
first off: here's a diagram of the intended layout:
Basically, we have a wrapper page that has a header, a footer, and an iFrame:
wrapper.aspx:
<form id="form1" runat="server">
<div id="wrapper">
<div id="divHeader">
</div>
<div id="divMain" >
<iframe id="ifrmMainBody" src="page.aspx"></iframe>
</div>
<div id="divFooter" >
</div>
</div>
</form>
then, the page that is in the iFrame, uses a master page which has a main-menu, a navigation panel, a few more toolbars, and then the content:
main.master:
<form runat="server">
<div id="mainMenu">
main menu
</div>
<div id="navPanel">
navigation panel
</div>
<div id="breadCrumb">
bread crumb
</div>
<div id="caption">
caption
</div>
<div id="subMenu">
sub-menu
</div>
<div id="toolBar">
toolbar
</div>
<div id="content">
content
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</form>
And then there's the page that uses the master page. I hard-coded in the width and height to force the scrollbars to appear:
page.aspx:
<form>
<div style="height: 1200px; width: 1500px;">
<p>
Put content here.
</p>
</div>
</form>
The problems I'm facing are:
Having problems getting the iFrame to take up the entire page height minus header and footer
Getting the scrollbars to appear ONLY in the content section
having the navigation panel and other toolbars not move when I scroll
Can anyone help me get this page laid-out correctly?
I think fixed position elements are kind of gross, because it forces the user to constantly see all your extra stuff when they might just want to see the content, but it sounds like what you're looking for. You can try something like this: http://jsfiddle.net/HBeBq/
#header {
position: fixed;
top: 0;
width: 100%;
height: 5em;
}
#navigation {
position: fixed;
left: 0;
top: 5em; // same as header height
bottom: 5em; // same as footer height
width: 10em;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 5em;
}
#contentWrapper {
position: fixed;
left: 10em; // same as nav width
top: 5em; // same as header height
bottom: 5em; // same as footer height
right: 0;
overflow: auto; // if this div's contents are too big, scrollbars automatically appear
}
#content {
position: relative;
width: 2000px;
height: 2000px;
}
Adam's answer is very good. I did something similar:
/*in wrapper*/
#wrapper {
width: 100%;
height: 100%;
}
#divHeader
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 30px;
background-color: #756398;
}
#divMain /*container for iframe*/
{
position: absolute;
top: 30px;
bottom: 30px;
left: 0px;
right: 0px;
}
#ifrmMainBody
{
width: 100%;
height: 100%;
}
#divFooter
{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 30px;
background-color: #926531;
}
/*in master*/
#mainMenu
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 30px;
background-color: #a9b77c;
}
#navPanel
{
position: absolute;
top: 30px;
left: 0px;
bottom: 0px;
width: 150px;
background-color: #b87c9a;
}
#breadCrumb
{
position: absolute;
top: 30px;
left: 150px;
right: 0px;
height: 20px;
background-color: #ABCDEF;
}
#caption
{
position: absolute;
top: 50px;
left: 150px;
right: 0px;
height: 20px;
background-color: #AB79B8;
}
#subMenu
{
position: absolute;
top: 70px;
left: 150px;
right: 0px;
height: 20px;
background-color: #A7b2E5;
}
#toolBar
{
position: absolute;
top: 90px;
left: 150px;
right: 0px;
height: 20px;
background-color: #E76235;
}
#content
{
position: absolute;
top: 110px;
left: 150px;
right: 0px;
bottom: 0px;
background: #666;
overflow: auto;
}