I'm adding a video to my project, but no matter what I do, its size doesn't exceed certain limits. I want to make the video full screen
Here is my css code
#myvideo{
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
#myvideo{
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
just on your html make sure the video id is same on css myvideo not myVideo:
<body> <video autoplay muted loop id="myvideo"> <source src="walk.mp4" type="video/mp4"> </video>
Related
So, I was trying to make a video take up the whole size of the screen but have failed multiple times. The best try to solve it was having the following code:
video {
position: absolute;
top: 0;
left: 0;
z-index: -1;
max-height: 100%;
min-width: 100%;
}
<video autoplay="" loop="" muted>
<source src="highway-loop.mp4" type="video/mp4" />
</video>
but then, also there is a little border and it's not full screen like this
https://nothing-to-see-he.re/57mz2UVuG
Any idea how i can fix it?
video {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-height: 100%;
min-width: 100%;
}
<video autoplay="" loop="" muted>
<source src="https://i.imgur.com/9f6mEiR.mp4" type="video/mp4" />
</video>
First you have z-index:-1 (which makes ur video go behind the screen/element) I changed it to z-index:1.
Click "Run this code" button to see that it works now. It also take full width and height of the div it is inside by default. Since in this current example nothing is stoping it, it does goes full size. Click "Full page" to confirm.
Thirdly the https://nothing-to-see-he.re/57mz2UVuG looks like the borders are from the video itself and not from html/css.
Use
video {
position: absolute;
top: 0;
left: 0;
z-index: -1;
min-width: 100vw;
min-height: 100vh;
}
because the max-height doesn't allow the width to increase.
I had the same Problem 2 Months ago. But i figured it out :D
Index.html
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
...
<video autoplay muted loop id="video">
<source src="video2.mp4" type="video/mp4">
</video>
...
Style.css
body {
margin: 0;
padding: 0;
background: #333333;
}
#video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
I hope this might help you :D
Wrap your video in a container. And do something like this.
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: coral;
}
video {
position: relative;
width: 100%;
height: 100%;
}
<div class="container">
<video autoplay="" loop="" muted>
<source src="https://i.imgur.com/9f6mEiR.mp4" type="video/mp4" />
</video>
</div>
I've made my first website, and I've run into some issues that I cannot solve myself.
The website is Bootstrap 4.
https://jsfiddle.net/NUJ88/cn2bdrw1/ <-- My nav
1: My main issue is compatibility with IE and Edge (Possibly also Firefox). Everything works fine in Chrome.
When I open it in IE11 the nav dropdowns aren't target-able and wont stay open on click. How do I solve this?
2: My second issue is the fullscreen html5 video function, which wont display on IE11 or Edge.
HTML:
<video autoplay muted loop id="homeVideo">
<source src="./local-source-mp4-file" type="video/mp4"; codecs="H.264/MPEG-4">
Your browser does not support HTML5 video.
</video>
CSS:
#homeVideo {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
z-index: -100;
This will do the job. The css is responsive so the video keeps its 16:9 ratio on all screen formats. It is not possible to have full width and full height because a video is 16:9 and many screens are not.
If you do not support Opera older then version 25 then you can remove the type="video/ogg" line. All modern browsers support type="video/mp4".
Note that the width="320" height="180" in the <video> tag are doing nothing. The css sets width and responsive height.
The styling of the <video> is terrible. For example, it is not possible to change icons, change button shape, etc. etc. For syling, a Javascript player is required, lik jPlayer http://jplayer.org
Trying to automatically execute the video to full screen (like the full screen button on the video player) is not possible. Even with the Javascript 'requestFullscreen' method it will result in an error Video API can only be initiated by a user gesture. In other words, the full screen can only be started by the website visitor with, for example, a button in the html.
<body>
<div class="videoContainer">
<video width="320" height="180" autoplay controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</body>
with this css to keep the 16:9 ratio on all screen formats
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.videoContainer {
display: block;
width: 100%; /* width of video */
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.videoContainer::before {
display: block;
content: "";
padding-top: 56.25%; /* keep 16:9 ratio */
}
.videoContainer video {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
I have tried using the tag but when the window is resize I need the video to fill the space as the window is resized. At the largest scale it fills the space and as is shrinks it starts to add a lot of white space at the top and bottom.
HTML
<video playsinline autoplay muted loop poster="images/user_item.mp4" class="w-100" style="">
<source src="images/user_item.mp4" type="video/mp4">
</video>
CSS
video {
position: absolute;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 300px;
border-radius: 5px 0 0 5px;
}
Is it possible to play the video in a canvas and resize the canvas and have it fill the entire space provided?
No need for a canvas, just use CSS. In particular here you want the object-fit property.
By default for video it's set to contains, meaning it will set the size of the media to the smallest side and add borders to the largest, keeping the aspect-ratio of the media.
From your description it's quite unclear if you want the cover which keeps aspect-ratio but cuts the media,
video {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
object-fit: cover;
}
<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>
or fill, which just stretches/shrinkes the media.
video {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
object-fit: fill;
}
<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>
And for future readers, note that this CSS property can also be set to <canvas>.
i need to use a mp4 video as background.
I would like the video to adapt to the size of the screen and not overlap with what is underneath.
I write:
<video autoplay loop muted poster="<?php echo $wo['config']['theme_url'];?>/img/1-s.png" id="bgvid">
<!-- MP4 must be first for iPad! -->
<source src="<?php echo $wo['config']['theme_url'];?>/video/1bis.mp4" type="video/mp4" /><!-- Safari / iOS video -->
</video>
And my css is:
video#bgvid {
position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
z-index: 0;
}
by assigning "top: 0", I would like the video to be displayed with:
height: 100vh;
overflow: hidden;
Hi Matteo is better positioning 50% left and top and after traslate the video to center it inside the page.
With z-index you can use negative number. If the video is used for background, add z-index: -1. In this way the other object stay over the video.
body {
padding:0;
}
video {
position: fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
min-height:100%;
min-width:100%;
z-index:-1;
}
<video autoplay loop>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
<h1>
PAGE TITLE
</h1>
I found this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fullscreen_video that I think is the best solution for your case.
The key of your problem is the position of the video.
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
Hope it helps!
I'm unable to get Chromium to allow me to overlay text or images over an inline video. I've tried setting the z-index (both in CSS and JS); I've tried adjusting the z-index after the video has already started playing, but no luck.
HTML:
<span id="text">test</span>
<video playsinline autoplay muted loop>
<source src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-30s/master/video.mp4" type="video/mp4"></source>
</video>
CSS:
video {
width: 300px;
height: 300px;
object-fit: cover;
position: fixed;
z-index: -1;
top: 50px;
left: 0;
}
#text {
color: red;
font-size: 100px;
position: fixed;
z-index: 9999;
}
I have a jsfiddle that works correctly in FF/Chrome/Safari; it's just not working on Chromium... the text stays behind the video.
Is there any way I can overlay over this inline video?