I want to use a youtube-video as the background of a container-block. This container-block isn't 100vw so I guess I need a bit of a different approach then the classic one. Therefore I tried that one here: https://codepen.io/daiaiai/pen/ygeyLG with that "code":
$color_1:rgb(25,29,184);
$color_7:rgb(241,90,111);
* {
vertical-align:top;
box-sizing:border-box;
margin:0;
padding:0;
height:auto;
border:0;
}
.sw_header{
height:92vh;
width:100vw;
overflow-x: hidden;
}
.sw_header-links{
width:40%;
height:100%;
display: inline-block;
background: $color_1;
overflow: hidden;
}
.sw_header-links-videowrapper{
//position: relative;
top: 0;
left: 0;
//width: 100%;
width: 100%;
height:100%;
pointer-events: none;
}
.sw_header-links-videowrapper iframe{
//position: relative;
top: 0;
left: 0;
height: 320%;
width:180%;
//height: 200%;
}
.sw_header-rechts{
display: inline-block;
width:50%;
height:100%;
background:$color_7;
padding:50px;
}
and the html-code therefore with that code:
<header class="sw_header">
<div class="sw_header-links">
<div class="sw_header-links-videowrapper">
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="sw_header-rechts">
<h4>The other content <br/> The other contentblock</h4></div>
</header>
But I do now get the problem of not being able to fit the video 100% to the container, like a background-size:cover; would do. Which values would I need for the video to be
- 100% height of the container
- proportionally correct scaling of the width
- alignment left top without any black backgrounds
- so that as a result of most device dimensions the videos width will be cropped.
Thanks for your answers!
Add this in your CSS :
iframe{
width: 100% !important;
height: 100% !important;
}
Related
Given the following DOM structure:
<div>
<iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo></iframe>
</div>
<div id="bottom-bar">Lorem Ipsum</div>
(See this JSFiddle for details and the styles I am already using)
How can I achieve the #bottom-bar to be fixed at the bottom while the video on top of it remains responsive and adjusts to the space it has available, without interfering with the bottom bar? I am thinking of achieving a typical video player experience with a scroll/info bar that is always beneath it.
I'd prefer a CSS only solution.
Just fix an iframe wrapper top, left, right, and set a number of px from the bottom and give your iframe a width and height of 100% inside of it then fix your bottom bar. Like so:
Here is a fiddle Fiddle Demo
<div class="iframe-wrapper">
<iframe src="https://www.youtube.com/embed/Ycv5fNd4AeM?autoplay=1"></iframe>
</div>
<div class="bottom-wrapper">
Bottom Wrapper
</div>
And Css
.iframe-wrapper{
position:fixed;
top:0;left:0;right:0;bottom:50px;
}
.iframe-wrapper iframe{
width:100%;
height:100%;
border:none;
}
.bottom-wrapper{
height:50px;
position:fixed;
bottom:0;left:0;
width:100%;
}
You can use diplay:table; and table-row to achieve this
I made a #container for #theVideo and the #bottom-bar and make its display:table;
Then #theVideo and #bottom-bar will be display:table-row, but we will make the #theVideo has height:100%; so it will try to be 100% of the height but will leave the space of #bottom-bar
<div id="container">
<div id="theVideo">
<iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0"></iframe>
</div>
<div id="bottom-bar"><p>Lorem Ipsum</p></div>
</div>
CSS:
body {
background-color: black;
color: white;
margin: 0;
}
#container{
position:absolute;
width:100%;
height:100%;
display:table;
}
#theVideo{
display:table-row;
height:100%;
}
#theVideo iframe{
width: 100%;
height: 100%;
border: none;
}
#bottom-bar{
display: table-row;
background-color: rgb(51, 51, 51);
}
#bottom-bar p{
margin:0;
padding:5px;
}
See the demo here https://jsfiddle.net/pgr26vg0/2/
I would normally agree with Drinkin People's answer. But I can imagine having everything on fixed positions is far from ideal on a webpage. So I figured out something else that does what you want, but is also scrollable.
The method relies on the calc function and the vh(viewport height). So if you decide using this method, keep in mind if you want to support older browsers.
Here is a fiddle
First we set the width of the container to 100% and its height to calc(100vh - 20px). The 20px is the space specified for your #bottom-bar.
Second we set the width and height of the iframe to 100%. Also set the borders to 0, because that would cause a little issue with scrolling bars if we don't.
Thirdly we give the bottom-bar dimensions. width: 100% and height: 20px;
This would create a fullscreen video-viewer, with the bottom bar you desire. I also added "#more-stuff" for the optional scroll effect. Just remove it if you do not want the scrolling effect.
PS: If you replace height: calc(100vh - 20px); with max-height: calc(100vh - 20px). It should also work inside a div container that changes size.
HTML
<div id="iframe-container">
<iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0"></iframe>
</div>
<div id="bottom-bar">Lorem Ipsum</div>
<div id="more-stuff"></div>
CSS
body {
background-color: blue;
color: white;
margin: 0;
}
#iframe-container{
height: calc(100vh - 20px);
width: 100%;
}
#iframe-container iframe{
width: 100%;
height: 100%;
border: 0px;
}
#bottom-bar{
width: 100%;
height: 20px;
background-color: black;
}
#more-stuff{
width:100%;
height: 400px;
color: yellow;
}
You just need to make the container for your video full width and height, then make your bottom bar fixed with CSS. You'll have to use JavaScript and make adjustments if you want to make sure the bottom footer doesn't overlap with the video.
HTML:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0"></iframe>
</div>
<div id="bottom-bar">Lorem Ipsum</div>
Then CSS:
body {
margin: 0;
}
.video-container {
width: 100%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#bottom-bar {
position: fixed;
width: 100%;
background: white;
bottom: 0;
}
And assuming have jQuery, here's the JavaScript:
$(function() {
var resizeVideo = function() {
$(".video-container, .video-container iframe").height($(document).height() - $("#bottom-bar").height());
}
$(window).resize(resizeVideo);
resizeVideo();
})
Try using flexbox. All modern browsers support it, with prefixes it also works in IE10. The footer can be dynamic height, so it also works when the text wraps. I also moved all the inline style in your example to the CSS panel, to make it easier to see.
jsFiddle
html, body {
height: 100%;
}
body {
background-color: black;
color: white;
margin: 0;
display: flex;
flex-direction: column;
}
.video-player {
flex: 1;
position: relative;
}
.iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 0;
}
.bottom-bar {
background-color: rgb(51, 51, 51);
padding: 5px;
}
<div class="video-player">
<iframe src="https://www.youtube.com/embed/TpBF_DRxWSo?autoplay=0&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0" class="iframe"></iframe>
</div>
<div class="bottom-bar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et magna volutpat, hendrerit nisi nec, tincidunt risus. Aliquam eu massa et lectus cursus dapibus.</div>
You can use position:fixed for #bottom-bar and give z-index:2, for top div z-index:1 in inline
<body>
<style>
body {
background-color: black;
color: white;
margin: 0;
}
#bottom-bar{
position: fixed;
bottom: 0;
z-index: 2;
width: 100%;
}
</style>
<div style="position: relative; display: block; height: 0px; padding: 0px 0px 56.25%; overflow: hidden;z-index:1;">
<iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&cc_load_policy=0&controls=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0" style="position: absolute; top: 0px; left: 0px; bottom: 0px; height: 100%; width: 100%; border: 0px;"></iframe>
</div>
<div id="bottom-bar" style="background-color: rgb(51, 51, 51); padding: 5px;">Lorem Ipsum</div>
</body>
If you can shift the markup slightly, it'll make it easier to keep the bar relative to the container:
<div class="video-container">
<iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo"></iframe>
<div id="bottom-bar">Lorem Ipsum</div>
</div>
Next you can make the video container responsive by using this trick:
.video-container {
height: 0;
width: 100%;
padding-bottom: 56.25%;
position: relative;
}
.video-container iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Lastly, stick your bar to the bottom:
#bottom-bar {
padding: 10px;
position: absolute;
width: 100%;
left: 0;
top: 100%;
}
See it in action here: https://jsfiddle.net/7qure8f5/1/
Here we go...
I'm assuming you want the video to span entire available region on the screen...
Idea is to have div containing the video to be:
Full height 100vh then make the width 178vh (178% of viewport height i.e. 16:9 ratio) this will work a treat for most screens which are 16:9 hd for less wide.
For even wider screens ( not very popular ) we use #media min-aspect-ratio to make video full width 100vw and set height as 56.25% of viewport width (56.25vh).
Thus video is always larger than available screen both in height as well as width :-)
Then we center it with position absolute; left, right, top and bottom as -999px then set margin auto perfectly centering the video both horizontally and vertically ;-)
We added a class video-container to the div containing the video.
Here's a fiddle,
https://jsfiddle.net/Luma4221/5/
I need to split the screen to 2: body (around 90% of the screen) and footer (around 10% of the screen - fixed on bottom).
The footer should be transparent and the body should have a lot of text so would be a vertical scroll bar.
My problem is that the body's height isn't 90% of the height (but 100%) so I can see the text behind my footer.
How can I fix it?
Here's JSFiddle that shows my problem.
And the code:
HTML:
<div id="body">
texttext<br/>text<br/>text
</div>
<div id="footer">
this is footer
</div>
CSS:
#body{
height:80%;
}
#footer{
width:100%;
height:30px;
position:fixed;
bottom:0;
left:0;
color: blue;
text-align: center;
background: red;
opacity: .5;
}
Thank you
Change your heights accordingly, but all you need is (CSS):
html, body {
height: 100%;
}
#body {
overflow: scroll;
}
Fiddle: https://jsfiddle.net/96jfew5s/4/
You have to set your parent (html and body tags) also to 100% of the height because if not you cannot set percentages to their childs (they try to get the percentage of their parents). Then, you can set your overflow-y: auto; to get the scroll in your body div.
Also, change the appropiate height to both body and footer divs.
Note: I would recommend you to change the name of your body div to other name that will not be related with reserved words to avoid confusions.
html, body{
height: 100%;
height: 100%;
width: 100%;
margin: 0;
}
#body{
height:90%;
max-height: 90%;
overflow-y: auto;
}
#footer{
width:100%;
height:10%;
position: fixed;
bottom:0;
left:0;
color: blue;
text-align: center;
background: red;
opacity: .5;
}
<div id="body">
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
<div id="footer">
this is footer
</div>
Use Viewport units: vw, vh, vmin, vmax
*{box-sizing: border-box}
body{
margin: 0
}
#body{
height: 90vh
}
#footer{
height:10vh;
color: blue;
text-align: center;
background: red;
opacity: .5;
}
#body,#footer{
display: block;
overflow-x:hidden;
overflow-y: scroll
}
<div id="body">
texttext<br/>text<br/>text
</div>
<div id="footer">
this is footer
</div>
I am stuck in making images inside background of a class responsive.The website url .
It would be very helpful if you could help me out i am using bootstrap and nivo slider.
The css and the html that i am using for the slider are given below.
The css:
.slider-wrapper {
width: 310px;
height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
width:290px;
height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height: 100%
}
The html:
<div class="slider-wrapper ">
<div id="slider" class="nivoSlider">
<img src="" />
<img src="" />
</div>
</div>
And a screenshot of the above code (with additional html ) on a laptop:
Here is the website url. Try viewing it below 380px width as that's when the problem occurs.
I want the image to be visible properly at less than 380px.
I want the all the images to become smaller and be in the center and properly aligned below 380px but i get this:
.
I would be more than thankful if you could help me out
It's a little hard to debug without seeing the whole picture, but I think you need to be using max-widths like the code below. This will prevent your divs/images from becoming larger than you want, but will allow them to be smaller if necessary.
.slider-wrapper {
max-width: 310px;
max-height: 650px;
background: url("images/iPhone.png") center center ;
background-size:cover;
}
.nivoSlider {
position:relative;
max-width:290px;
max-height:512px;
top:60px;
bottom:65px;
left:23px;
right:24px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width:100%;
height: auto;
}
Absolute positioned elements need to be put in a floated container to move responsively. The mobile content will move in sync with the screen shell if you put the absolute container into a floated one. I ran into this exact same problem on one of my projects - it's a surprisingly easy solution.
Pen:
http://codepen.io/staypuftman/pen/tFhkz
Note the pink absolute positioned element moves as you resize the screen while staying inline with the blue box. The whole blue box with the pink absolutely positioned element inside will float together as unit to any width.
HTML:
<div class="hero-background">
<div class="hero-text-area-container">
<h3 class="hero-text-effects">Eaters: Find Your Favorite Food Truck</h3>
</div>
<div class="iphone-backdrop">
<div class="hero-image-band-container"></div>
</div>
</div>
CSS (background colors are to show elements):
.hero-background {
background: #dedede;
height: 100%;
margin-top: 4em;
min-height: 20em;
min-width: 100%;
}
.hero-text-area-container {
background: #d6ffd1;
float: left;
margin: 0% 6%;
max-height: 25em;
padding-top: 11em;
position: relative;
vertical-align: middle;
width: 55%;
}
.hero-background .hero-text-area-container h3 {
background: #f7f7f2;
opacity: .8;
padding: 1em;
text-align: center;
}
.iphone-backdrop {
background: #d1e2ff;
float: left;
height: 120px;
max-width: 320px;
padding-top: 2em;
position: relative;
width: 100px;
}
.hero-image-band-container {
background: #ffd1d1;
height: 80px;
position: absolute;
width: 80px;
top: 13%;
left: 0;
bottom: 0;
right: 0;
}
Change the css in nivo-slider.css from:
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%
}
To
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
/* now this is the important things for your problem */
vertical-align: baseline !important;
max-width: none !important;
}
i found the answer.It was posted to me by a user.So I'm sharing it if anyone else gets into any trouble:
"So to not have all the things in the comments I post an answer.
The "problem" on screen-/ viewport widths of 380px and below has several issues.
On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:
.slider-wrapper3 {
background-size: contain; /* you use cover */
background-repeat: no-repeat;
/* keep the rest of your actual code */
}
and remove the width setting (width: 310px;) at least for your small screen layout!
By doing so you have then fixed the position and size of the container (and also the background image).
So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from)."
Try this:
#media(max-width: 380px) {
.nivoSlider{
position:relative;
width:94%;
height:378px;
top:85px;
bottom:0px;
left:8px;
overflow: hidden;
}
I'm trying to restrict the height of images within a table. The reason for the table is to allow these images to be aligned vertically and horizontally to the center of the page. The problem I have is that images larger than the browser height disappear of the bottom of the page enlarging the table, I'd like the image to have max-height:100; and scale to fit. It works with the width, but not the height.
Here's what I have so far...
<div id="table">
<div id="cell">
<img src="image.jpg"/>
</div>
</div>
and
html, body{
height:100%;
margin:0;
padding:0;
}
#table{
display:table;
height:100%;
width:100%;
}
#cell{
display:table-cell;
vertical-align:middle;
text-align:center;
background-color:#ccc;
}
img{
max-width:100%;
max-height:100%;
}
You can achieve this without using a table. Here's the basic outline, HTML:
<body>
<img src = "image.jpg"/>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
body {
position: relative;
}
img {
position: absolute;
margin: auto; /*make sure it's centered both vertically and horizontally*/
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}
And a little jsFiddle demo: little link. Note that body must have position: relative; for this to work.
I hope this helped!
Okay. I'm trying to get a page to display 100% of the height of the viewport, but the catch is the page has multiple divs that aren't always nested. I've been browsing multiple questions and other websites and I cannot find an answer that suits my needs.
I currently have a layout as so:
<html>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Where as the header and footer is 80px each, I am trying to get the content div to fill the rest of the viewport. I've tried setting html, body, & the container div to "height:100%" each and then setting the content div to min-height:100% and height:100% but that just makes the div expand to 100% of the viewport, and then the footer gets pushed down 80px (because the header is 80px), so the full page ends up as 100% + 160px (two 80px divs).
Any ideas? Cheers.
You can do this with simple display:table property.
Check this:
http://jsfiddle.net/HebB6/1/
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
display:table;
width:100%;
}
.content {
background-color: blue;
}
.header {
height: 80px;
background-color: red;
}
.footer {
height: 80px;
background-color: green;
}
.content, .header, .footer{
display:table-row;
}
original post here: http://peterned.home.xs4all.nl/examples/csslayout1.html
http://jsfiddle.net/cLu3W/4/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:750px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
padding:1em;
background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
I don't have chrome right now and this doesn't seem to be working in jsfiddle but you should be able to achieve this by making all absolute positioned, having header have top set at 0px, footer bottom at 0px, and content have top: 80px, bottom 80px. You'll also have to make the container, body, and possibly html take up 100% height and have absolute or relative positioning.
*{margin:0; padding:0;}
.header{height:80px; background:salmon; position:relative; z-index:10;}
.content{background:gray; height:100%; margin-top:-80px;}
.content:before{content:''; display:block; height:80px; width:100%;}
.footer{height:80px; width:100%; background:lightblue; position:absolute; bottom:0;}
This is not perfect. For example, what happens when the text overflows .content is really not ideal, but you could solve this problem by using height based media queries to simplify the design for smaller screens.
This can be achived in multiple ways:
Use a table base layout (fully supported, but frowned upon)
Use the new CSS 3 flex box layout (no old IE support)
Using absolute positioning
I would recomend the 3rd option. See an example at http://jsfiddle.net/HebB6/
HTML:
<html>
<body>
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
CSS:
html,
body,
.container {
height: 100%;
background-color: yellow;
}
.container {
position: relative;
}
.content {
background-color: blue;
position: absolute;
top: 80px;
bottom: 80px;
left: 0;
right: 0;
}
.header {
height: 80px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.footer {
height: 80px;
background-color: green;
position: absolute;
top: 0;
left: 0;
right: 0;
}