I am currently working on a website where I want on the top to be a slideshow/carousel like thing but with videos instead of pictures instead.
The video should have a width of the full page which is working fine but I can't happen to get it to to adjust the height.
The video is "to big" in height so I am trying to only show half of it.
I tried doing so by limiting the height of the parent div but the video keeps to "overlap" out of that div.
Add overflow: hidden to the div of the video. Therefore the div will hide any overflowing content of the div.
I believie you are looking for something like this. It would keep aspect ratio.
<div class="container">
<video></video>
</div>
.container {
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
Ref: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
Or as Mantas mentiones, do overflow: hidden, but that will crop video.
Related
The code is simple enough, it's basically an iframe: (this code is right after the <body> tag.
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%" src="https://www.youtube.com/embed/MYVIDEOID?autoplay=1&controls=0&loop=1&rel=0&showinfo=0&autohide=1&wmode=transparent&hd=1"></iframe>
</div>
The only problem I'm getting is that my monitor is wide and when maximized, the edges on the side of the browser are black, (meaning the video only stretches so much). It will only satisfy the window size to 100% of either the height or the width.
To put in other words, if re-sized to "phone/tablet" vertical position, the video will be at 100% in width (still in 16:9 ratio), but everything above the top border and below bottom border will be black/blank space.
How would I make it so the video is always covering 100% of the background? (if width is way more than height for the 16:9 aspect ratio, it's still scaled appropriately just missing the top/bottom part of the video in "see-able" view. likewise.. if in mobile mode, the height of video is 100% of device/browser, video is still 16:9, but sides of video aren't see-able)
I have found this resource to accomplish exactly what I needed to have done: https://vegas.jaysalvat.com/
Works best with own MP4 (or similar) uploaded resource.
Not sure why I can't get this to work. I'm certain I've used this method before but can't find anything on it and can't get the issue resolved. I have a container div that contains a video. The height and width of the video will always adher to the 16:9 ratio of the original video. The video is fixed as I will be adding more content to the container (.featured) div that will overlay over the video. I need the height of the container to equal the height of the video in order to solve my problem (not to mention help out with responsive issues i will run into). My code is as follows:
<div class="featured">
<video loop id="featured-content" class="featured-video" poster="/sites/all/themes/merge/img/poster-frame.jpg">
<source src="/sites/all/themes/merge/img/Atlanta-Test.mp4" type="video/mp4" >
</video>
<div class="main-wrap">
<h1>Learn</h1>
</div>
</div><!--end featured-->
And my sass:
.featured{width: 100%; height: auto;
#featured-content{width: 100%; height: auto;position: absolute;}
}
Problem is the content from the rest of my site is coming up over the top of the video. Need the container div to match the height the video's auto height but can't get it to work for some reason. Any help is much appreciated!
You should be able to drop the height specification, and try adjust display type to inline-block:
.featured {
width: 100%;
display:inline-block;
}
Fiddle (added red border for clarity)
You need to float the video.
#featured-content {
float: left;
}
http://codepen.io/PanosAngel/pen/jqabxJ
I'm trying to add a responsive image to a front page that expands to the full width of the page. Similar to what many sliders do, but I only have one image so a slider is overkill. I've set up a div and set it's background image and background-size to 100% and that achieves the width. My problem is the height. I have to use a fixed height in order for the div to appear. I've tried setting height to auto, but then I don't get an image. I tried using this method:
How can I resize an image dynamically with CSS as the browser width/height changes?
but I can't seem to get the width to scale correctly. Using a fix height works fine until the browser window expands past the size of the image, and then it starts to cut off. Any thoughts on how I can make the height scale dynamically just as the width? Any thoughts would be greatly appreciated!
My code:
CSS:
.banner {
max-width: 100%;
height: 720px;
background: url(../images/homepagebanner.jpg) no-repeat left top;
background-size: 100%;
}
HTML5:
<div class="banner"></div>
I am using bootstrap, but this is outside of a container so it shouldn't be affecting this piece of code.
EDIT Here's the codepen:
http://cdpn.io/xLvzA
Have you tried setting the height of html to 100%, then setting the height of your banner to 100%? Adding a codepen demo to show your exact issue might help a bit better to help vizualize the exact problem you're having
I wish to have an image (img tag not background to a div) which stretches full width and stretches to the bottom of the page (without stretching to the top).
I have tried the solution described here: CSS Background to stretch to window bottom?
but I am only getting it to stretch 100% in relation to the page, and creating a scrollbar and going under the page. I tried various variations (with min-height instead of height and I either get the image back to just full width (without stretching height to the bottom) or it stretches beyond the screen.
I have prepared a small JSFiddle of what CSS and HTML I have so far, although the effect might not be so visible.
http://jsfiddle.net/Sk55Z/
What am I missing?
I would look into jQuery Backstretch to make it cross browser. You can also use conditional html statements to rely on background cover to maintain a correct aspect ratio.
.iebg {
position: fixed;
top: 0; /* here is where you specify how low you want the image to start */
left: 0;
width: 100%;
height: 100%;
}
Throw that class on an image tag.
And here is an example with just an image tag:
http://jsfiddle.net/Sk55Z/2/
I've been given a design for a website, and am trying to implement it.
One problem I've run into is that the design has some background images (one for the header, one for the body, and one for the footer of the site) that are wider than the main content area of the site.
Simply putting them in as background images doesn't work, since expanding the header, body and footer divs enough to accommodate the backgrounds causes horizontal scrollbars to appear if the browser window is not big enough to fully show the backgrounds.
This is undesirable since the backgrounds are not really important for viewing the website, and I don't want scrollbars to appear for them (scrollbars should only appear once the browser is too small to completely show the content of the website).
The second technique is to have a separate, absolutely positioned div to show the header background image (and put it under an element with the browser window's size), and set its width to 100% so that it never exceeds the size of the browser window (and hence create scrollbars).
This works up to a point - however, when the window is too small, the background starts shifting around relative to the content since the "top center" position of the background is relative to the browser window, not the content area. At large sizes, these are effectively the same since the content area is centered, but at small sizes, only part of the content is shown, so the center of the content and the center of the browser window are different.
A good illustration of this problem that I've found is the Quicken website: http://quicken.intuit.com/. At large sizes, its cloud background looks fine, but if you make your window's width small enough, the clouds start shifting relative to the content (bad!).
Any ideas on how to fix this so that backgrounds images
don't create scrollbars since they are not part of the content of the site
are fixed relative to the content of the site (and don't shift around at small browser window sizes)
?
An ideal solution would be something like turning overflow to hidden on the body, but only for specified divs. Unfortunately I believe this is impossible.
I'd prefer a pure html/css solution, but I accept that I may need js to get the effect I want.
Thanks! (this is a complex issue, so if any clarification is needed, let me know)
UPDATE: Fixed this by setting min-width on the background div to the width of the content.
Set the min-width on the div containing the background image to the width of the content.
You need to have your header, content & footer have a width of 100%. And put the image in as a background image in these divs ... center it horizontally.
Inside the specific divs have a wrapper that is centered. and is the width of the content of them divs.
Like so.
HTML
<div id="header">
<div class="wrapper">
...
</div>
</div>
<div id="content">
<div class="wrapper">
...
</div>
</div>
<div id="footer">
<div class="wrapper">
...
</div>
</div>
CSS
div#header {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#content {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#footer {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div.wrapper {
margin: 0 auto; /* to center the div horizontally */
width: 960px; /* or however wide it should be */
}
Hope this helps.
Am I missing something, or should you be using the CSS background-image property?
I had a look at the Quicken site, and to be honest the cloud background image shifting when the browser is resized shouldn't be worried about unless your background-image is most distinctive than a bunch of clouds.
See what I mean?
You could use the overflow property and set it to hidden on the div that cause a scrollbars to appear.
I had the same issue on a site that I worked on, and come up with the following solution, which works well if all your background images are the same width.
/*
A container div that is set to the 100% width, with the overflow set to hidden.
This hides the overflowing images if the window sizes is too small
*/
#bg_container {
position:absolute;
z-index:0;
top:0px;
width:100%;
overflow:hidden;
}
/*
A div that sets the size of the content and centers itself on the page.
*/
.bg {
margin:0 auto;
width:1000px; /* content size */
overflow:visible;
}
/*
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px.
*/
.bg img {
margin-left:-250px;
}