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
Related
I have a two-column row in which I want one row—which contains some text—to keep it's height and size independent of the window size, and the other—which contains the video—to shrink and stretch with the window size.
I'm too much a beginner with CSS to have a better idea of how to do this by reading related answers here.
Here's the HTML. I didn't set height or width for the video because I want it to be variable and have the whole page overflow after the video's minimum width.
<!-- Originally tried with bootstrap grid, but that didn't work, that's why the class names -->
<div class="row upper-row">
<div class="text-column">
<!-- some paragraphs -->
</div>
<div class="video-column">
<div class="video">
<video controls>
<source src="<some source>" type="video/mp4">
</video>
</div>
</div>
</div>
Attempt at CSS:
Styles for the video are almost empty because, after trying so many things, nothing has worked and are too much to list here. I read about fit-content, object-fit, tried to use flexbox, but can't make this work.
.text-column {
width: 500px;
}
.video-column {
min-width: 500px;
}
UPDATE
Before seeing the three answers posted so far, I had started trying with Bootstrap's auto-layout columns, and it seems to work. The only thing that I haven't been able to sort out is that, after the video has reached it's min-width, the page doesn't overflow; instead, the video is wrapped into a second row and everything becomes a mess.
I have been reading a bit about the methods from the answers provided and I will checkout to a previous commit to try them. For now, this is what I have done. I have added a couple things, but the main content is the same.
HTML:
<div class="container">
<div class="row upper-row">
<div class="col-lg-auto text-column">
<!-- some paragraphs -->
</div>
<div class="col video-column">
<div class="player-container">
<div class="video">
<video controls>
<source src="<some source>" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
CSS:
.player-container {
/*This width seems to control the actual video size. If I use 100%, it allows the video to get too big and overflow the screen.*/
width: 90%;
/*This is the height that seemed most appropriate for this div to actually contain the video height*/
height: 100%;
/*I use this position because I am overlaying some things on the video*/
position: relative;
top: 5%;
left: 4%;
}
.video {
/*This is to do the overlap*/
position: absolute;
top: 0%;
left: 0%;
}
video {
min-width: 10%;
max-width: 100%;
min-height: 10%;
max-height: 100%;
}
With this, the text-column stays the same width and the video column successfully shrinks with the window, but, as I said, it doesn't overflow after the min-width has been reached.
You can achieve this by using media queries in css or giving the container your desired width and height auto it will make it also responsive
There are many ways to achieve a two columns layout.
In my opinion, the simplest solution is with flex.
Solution on Codepen
However, I don't recommend this kind of solution since it's not responsive, as it does not scale well with the size of the screen and doesn't work well on mobile.
For a better solution, you would most likely cover the width of the whole screen with the 2 columns and just resize the video element as needed.
Better solution on Codepen
You could also make this work with a Grid layout instead of Flex.
Here is a good guide on how to realize common layouts with CSS grid.
You can use % for the responsiveness of your video.
.video-column video { width: 100%; }
I have simply included a video:
<video preload muted autoplay loop id="sty">
<source src="content/1/sty.mp4" type="video/mp4">
</video>
I want this video to be full-width therefore I gave the css-properties weight 100% and height 100% to it:
* {
overflow: hidden;
}
video {
height: 100%;
width: 100%;
}
Overflow so that now scrolling is allowed. I simply want to show the video (without scrolling allowed therefore I use overflow hidden). Now I want to add some buttons (and these are [svg] images) as overlay to the video (to like the video, to share the video and to get more informations about the video). The buttons should be at the bottom-left side of the video like the buttons of TikTok:
But so far I can't get it working neither as overlay nor responsive.
Anyone has a working snippet where three buttons are placed over an video (like in the screenshot) on the left side?
Best regards
You can use object-fit property to fit the video without overflows:
video {
height: 100%;
width: 100%;
object-fit: cover;
}
Is there any way to resize an SVG in css that goes beyond the 100% of the original image? I currently have the svg in a img tag and have removed the height and width from the SVG file. Currently I have tried to set the height and width in css but it won't scale up beyond 100%. Any suggestions would be greatly appreciated, seems like this is somehow linked to the viewbox that is set in the svg.
<img class="map" src="map.svg" alt="Map">
.map{
width: 100vw;
}
I seem to have stumbled back upon something I tried earlier and this time it worked! If you move the class up a level to a wrapper then width should work as expected.
<div class="map">
<img src="map.svg" alt="Map">
</div>
.map{
width: 100vw;
}
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.
I want to make a custom height video background for a specific div container and display contents like headings,paragraphs on top of it...
When I keep the height at 100%, the video works just fine with full width..But when I try to resize the height, the width also reduces.
How do I make the video display at a height of 500px for example and keep the width at full width...and to display a small paragraph with a heading in center of the video.
video#videobg {
position: relative;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 500px;
}
<div class="container">
<video autoplay poster="Cheer-Up.jpg" id="videobg" loop>
<div><p>Something here</p></div>
<source src="Cheer-Up.webm" type="video/webm">
<source src="Cheer-Up.mp4" type="video/mp4">
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
try using CSS to set a specific height for the video container, but also setting the width you want it to stay. put this in your header.
<style>
#videobg {
height: <PUT YOUR HEIGHT HERE>;
width: <PUT YOUR WIDTH HERE>;
}
</style>
also, put the width at a specific pixel count. the 100% could change depending on the height.