For my project I need to make an responsive table, with HTML5 video in it.
Example:
http://ads.memo2.nl/Jeroen/2016/TVTest.html
<html>
<body>
<head>
<title> :: MeMo2 :: </title>
<style type="text/css">
table {
font-size: 0;
}
</style>
<script src="http://ads.memo2.nl/Jeroen/2016/JWPlayer/jwplayer-7.4.4/jwplayer.js"></script>
<script>jwplayer.key="7lMg3sdALZwtB8ygJTZ/MDB0lyJ+bFuyT7qDEQ==";</script>
</head>
<body>
<div id="tvWrapper" style="margin: 0px auto; width: 100%; transition: all 1s; -webkit-transition: all 1s;">
<div style="width: 100%; margin: 0 auto; position: relative;">
<div style="background: url('http://s28.postimg.org/3xquvgh31/TVtop.png') no-repeat; background-size: 100% 100%; width: 100%; height: 8px; z-index: 2;"></div>
<div style="background: url('http://s28.postimg.org/3py61tzst/TVleft.png') no-repeat; background-size: 100% 100%; float: left; width: 8px; padding-bottom: 56.25%; position: absolute; z-index: 2;"></div>
<div style="float: left; width: calc(100% - 8px); padding-bottom: 56.3%; position: relative; z-index: 1;">
<div id="myElement" style="position: absolute; width: 100%; height: 100%; margin: 0 auto;border: 0;"></div>
<script type="text/JavaScript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "http://ads.memo2.nl/banners/defensie/2016/Veteranendag/Dominique.mp4",
aspectratio: "16:9",
width: "100%",
skin: {
name: "roundster",
active: "#add136",
inactive: "#bbb7b7",
background: "white"
}
});
</script>
</div>
<div style="background: url('http://s3.postimg.org/vzf09qvk3/TVright.png') no-repeat; background-size: 100% 100%; float: right; width: 8px; padding-bottom: 56.25%; position: absolute; right: 0; z-index: 2;"></div>
<div style="background: url('http://s24.postimg.org/fxwbp4pv9/TVbottom.png') no-repeat; background-size: 100% 100%; width: 100%; padding-bottom: 8%; clear: both; z-index: 2;"></div>
</div>
</div>
</body>
</html>
As you can see it's responsive, but it sets the bottom of the TV at the bottom of the browser. Is there an easy way to fix this?
If I put in a iFrame, the next thing what is happening is that the bottom of the TV is set right under the top of the TV.
Example:
http://ads.memo2.nl/Jeroen/2016/TestingPlz.html
table {
font-size: 0;
}
iframe {
width: 100%;
max-width: 1000px;
min-height: 700px;
}
<iframe src="http://ads.memo2.nl/Jeroen/2016/TVTest.html" frameborder="0" scrolling="no"></iframe>
My idea is to make the television responsive within the iFrame, but then with the TVbottom.png at the bottom.
Try removing:
padding-bottom: 56.3%;
from the DIV wrapping the JW Player target element (#myElement)
I think the best way to do it using CSS , which is
http://www.w3schools.com/css/css3_border_images.asp
I think you should try this , i have used it before its quite easy,
remove padding from all divs,
just keep the last one's
<div style="background: url('http://s24.postimg.org/fxwbp4pv9/TVbottom.png') no-repeat; background-size: 100% 100%; width: 100%; padding-bottom: 8%; clear: both; z-index: 2;"></div>
see here:-
http://codepen.io/ravu/pen/oLZZJy
Related
I'm trying to add color overlay on top of a youtube embed video. I'm using vue-youtube-embed component to embed the video.
.video-player {
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 360px;
width: 640px;
}
.color-overlay {
height: 360px;
width: 640px;
background: black;
z-index: 999;
overflow: hidden;
}
<div class="video-player mx-auto">
<div class="color-overlay">
<youtube video-id="vT__WcbNWpY"></youtube>
</div>
</div>
The video-player class is used to add rounded corners on the video. The color-overlay does not work as I wanted it and it shows nothing. What should I do?
In your HTML, make the overlay div a sibling of iframe.
Then just use absolute positioning inside your common parent, like so:
.video-player {
position: relative;
border-radius: 10px;
height: 360px;
width: 640px;
}
.color-overlay {
position: absolute;
top: 0;
opacity: 0.5;
height: 100%;
width: 100%;
background: blue;
}
<div class="video-player mx-auto">
<iframe src="https://www.youtube.com/watch?v=vT__WcbNWpY&t=3s&ab_channel=OceanConservationNamibia" width="640" height="360"></iframe>
<div class="color-overlay"></div>
</div>
Add overlay tag outside of div so it can consume all screen and will add overlay on screen. if you need only on iframe just add color-overlay div inside video-player div
.color-overlay {
height: 100%;
width: 100%;
background: blue;
z-index: 999;
overflow: hidden;
opacity: 0.2;
position: absolute;
}
.video-player {
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 360px;
width: 640px;
}
<div class="color-overlay"></div>
<div class="video-player mx-auto">
<div class="">
<iframe src="https://www.youtube.com/watch?v=vT__WcbNWpY&t=3s&ab_channel=OceanConservationNamibia" width="600" height="300"></iframe>
</div>
</div>
Here is my html code:
<div class="header">
<div class="headerBanner">
<img src="img/NewTopBanner.jpg" width="885" height="190" border="0" />
</div>
</div>
Here is my CSS:
.header {
position: relative;
background:url('img/header/CRC_Website_TopBannerLeftStretch.jpg'),url("img/header/CRC_Website_TopBannerRightStretch.jpg");
background-position:left, right;
background-size:50% 100%;
background-repeat:no-repeat;
}
.headerBanner {
width: 885px;
}
This is my HTMl and css code.
it works, but this two background images stretches to middle. I want this two images(left,right) not stretched and repeat to middle of the page.
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
Try this one, (not tested). It may be help you.
Here's my working example:
http://jsfiddle.net/UGhKe/2/
CSS
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: 5em;
}
.content {
position: absolute;
top: 5em;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
HTML
<div id="body">
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
I want the content to be positioned below the header when you scroll the top (but hidden when you scroll down, under header) - this works fine...
However I need to remove top: 5em and use something like "inherit the current height of the header" - is it possible without JS?
If it's really not possible without JS, then I can just use JS but I'd rather try and find a solution in pure CSS.
EDIT:
I should note that the reason I can't use top: 5em is because the header will not have a fixed height - an image (for a logo) will be used inside of the text, and that would be set to max-width: 100% so that it shrinks to right width for an iPhone and doesn't expand too much on say an iPad.
See if thats work for you. http://jsfiddle.net/UGhKe/3/
I added another div with the same height but "non-fixed" to simulate your fixed header.
HTML
<div id="body">
<div id="blockHeader"></div>
<div class="header">
<div class="large">Header</div>
</div>
<div class="content">
Content, you should be able to see this when you scroll to top.
</div>
<div class="footer">
<div class="large">Footer</div>
</div>
</div>
CSS
html, body { margin:0; padding:0; }
#blockHeader
{
width:100%;
height: 5em;
}
.content {
position: absolute;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
You can do it using variables(Use SASS or LESS for that). Take a look at the pen.
CODE:
$headerContentVariable: 5em;
#body {
height: 200px;
background: black;
width: 100%;
}
.header {
position: fixed;
top: 0;
background: #369;
z-index: 1;
width: 100%;
height: $headerContentVariable;
}
.content {
position: absolute;
top: $headerContentVariable;
overflow: hidden;
height: 1000px;
background: #936;
z-index: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
background: #396;
width: 100%;
}
.large {
font-size: 120%;
padding: 2em;
}
I have a odd problem while working on a small site.
I can't get my wrapper to wrap around all of my other divs correctly. My code looks like this:
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
</div>
</div>
<div id="content">
<div id="text">
<form></form>
</div>
<div id="contact"><img />
<map name="Map" id="Map">
</map>
</div>
</div>
<div class="clear"></div>
</div>
</body>
And the CSS:
body {
margin: 0px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
}
#wrapper {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
}
#header {
height: 560px;
width: 1190px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/Header.jpg);
background-repeat: no-repeat;
}
#menu {
width: 640px;
position: relative;
left: 350px;
top: 115px;
}
#content {
width: 1190px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 10px;
}
#text {
width: 550px;
float: left;
margin-bottom: 20px;
position: relative;
left: 180px;
}
#contact {
float: left;
margin-bottom: 20px;
position: relative;
left: 230px;
top: 50px;
}
.clear {
clear: both;
}
The wrapper seem to wrap on some of my pages but not all, and if I specify the size of the image in #contact it will fail on the other pages aswell. However, it does wrap the #text div.
Am greatly pleased for any help!
Best Regards
Robert
The position: relative; style attached to the contact div is messing up the wrapper near the bottom. If you remove that style and then switch out the offsets to be margins instead, the wrapper div now wraps correctly across all the content divs. I have set up an example with your code here:
http://jsbin.com/eqecev/2/edit#preview
Add overflow:auto; to your wrapper div's CSS.
I'm trying to figure out how to have a floating navigation bar to the left of the content, that is fixed width but has a container around it that extends to the edge of the viewport while keeping the content centered on the page.
And here's what I got going so far and an image of what I mean. http://dl.dropbox.com/u/23132/index.html
Any help or ideas?
Got a solution from Bordingo.
<html>
<head>
<style type="text/css">
html, body { height: 100%; min-width: 960px;}
.container { width: 960px; height: 100%; margin: 0 auto; background: #ddd; }
.nav-fix { position: absolute; left: 0; width: 50%; min-width: 480px; height: 100%;}
.nav { position: absolute; top: 100px; right: 280px; width: 9999px; height: 200px; background: #333; }
.nav-box { position: absolute; top: 10px; right: 10px; width: 180px; height: 180px; background: #eee; }
</style>
</head>
<body>
<div class="nav-fix">
<div class="nav">
<div class="nav-box"></div>
</div>
</div>
<div class="container"></div>
</body>
</html>
If you are willing to use jQuery, you can pretty easily calculate the offset of the main body and adjust the width/padding/margin of the sidebar accordingly.
Simple example
http://dl.dropbox.com/u/1588084/floatmenu.htm