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;
}
Related
I have a 1280x720 video (AAC, H.264 in case it's important)
My browser window is 1440x764
I have the following CSS:
#original-video {
position: absolute;
top: 0;
left: 0;
}
and the following HTML
<body>
<video id="original-video" width="1280" height="720" playsinline>
<source src="/db/original.mp4" type="video/mp4">
</video>
<body>
And yet when the video is rendered on the page, there is a vertical and horizontal overflow. Which makes no sense as the width and the height of the video is supposedly smaller than the width and the height of the window.
How can I fix this and have the video fit inside the window ?
EDIT: I think it's because of the hight resolution of the video. Even though it "says" it's 1280x720, the rendered dimensions are actually larger. But I don't know how to fix this.
Changing the CSS into something like:
#original-video {
position: absolute;
top: 0;
left: 0;
width: 77.2223%;
}
resizes the video proportionally to fit my 1440x764 window.
So it was indeed due to the higher resolution of the video.
But I don't know if this is the proper way to fix this so I'm tentatively adding this as an answer while I wait for someone more experienced to confirm or suggest a more appropriate solution.
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.
I'm having an issue with the size of my border being incorrect before the content of the border (a video) is loaded. I have a list of elements and each element can be clicked - this will load a new video (animation) for each different element. Because there can be a short loading time for the videos, sometimes they take 1-2 seconds to appear. During this time, the border size is way off and overlaps my other elements. As soon as the video loads, the border 'snaps' to the correct size.
How do I keep my border from doing this?
Here's the HTML:
<div id="video"><video id="animation" autoplay="" loop="" muted=""><source src="videos/xxxxxxx.mp4" type="video/mp4"></video></div>
Here's my CSS:
#animation{
border: 5px solid #c00;
height: 100%;
}
#video{
height: 50%;
}
And here's a photo of the issue (I've painted over the text of the website). Note the way too large and overlapping border before the video loads.
Please let me know if there's any extra info or code I can provide.
What you should do is set the width of the video to something fixed.
#video{ width:300px;}
#video video{width:100%;}
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 set a html5 video to full browser size. I could do it but not as i want.
I did it before using flash using "Scale" equal to "noborder". This is the result: http://inoq.com/lxgo/transportes.html - click on the right menu, a popup will open with the video.
I want to do the same using HTML5 video. I could set it full browser size, but keeps showing the black bars on top and bottom or left and right, depending on screen size, to keep the ratio. This is the result: http://inoq.com/lxgo2/cidade.html
Any ideas on how to do it? Is it possible at all?
Thanks
Bruno
With the HTML5 video element, scaling one of the dimensions causes the other to automatically scale to maintain the aspect ratio. As such, if you set the height of your video element to the height of the window, and centre it within a containing div with overflow set to hidden, you should get the effect you're looking for.
HTML:
<div id="container">
<video id="player" autoplay loop>
<source src="http://inoq.com/lxgo2/videos/transtejo.mp4" type="video/mp4" />
<source src="http://inoq.com/lxgo2/videos/transtejo.webm" type="video/webm" />
<source src="http://inoq.com/lxgo2/videos/transtejo.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
JavaScript:
// Using jQuery for ease
var $player = $('#player');
var $window = $(window);
// if you only set one of width and height, the other dimension is automatically
// adjusted appropriately so that the video retains its aspect ratio.
// http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
$player[0].height = $window.height();
// centre the video
$player.css('left', (($window.width() - $player.width()) / 2) + "px");
CSS:
#container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#player {
position: absolute;
}