So I'm trying to make this website with a video for the banner, now it works perfectly in Firefox (my primary browser) but whenever I run it in chrome the video doesn't resize and covers the navigation menu. I haven't yet tried this in edge so I can't say yet how it works there but I need it to work in Firefox and Chrome mainly.
I'm using an unedited .mp4 video in a code block like so
<header class="main-header">
<video autoplay muted loop id="myVideo">
<source src="images/hotel.mp4" type="video/mp4">
</video>
</header>
And the css,
#myVideo {
position: relative;
bottom: 100;
object-fit: cover;
width:100%;
height:100%;
}
I can add the entire code block from the home-page is that helps.
Related
I have a video on one of my html pages, and I love the dimensions for it on desktop, but on mobile its way too large, and is extending the screen.
I know this is fixable but I'm a bit confused in the solution I've looked a few up and am still confused.
<video width="900" height="450" autoplay loop controls >
<source src="images/Demo.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
video{
max-width:900px;
width:100%;
}
<video height="450" autoplay loop controls >
<source src="images/Demo.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
below CSS might help you.
video{
max-width:900px;
width:100%;
}
Remove the width and height attributes inside the HTML.
<video autoplay loop controls >
<source src="images/Demo.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
Use CSS media queries to style the video frame. Example:
#media only screen and (max-width: 600px) {
video {
width: 900px;
height: 450px;
}
}
See the first line of the CSS code. There stands max-width: 600px. This is the maximal width of your screen. 600px are small devices.
Disclaimer: the CSS code is pseudo code. Play with the numbers to fit it into your screen and for mobile use percentage instead of pixels.
If you use width: 100%; it will be responsive to any screen size.
Using the CSS code multiple times with other screen sizes, you could support tablet or computer screens.
P.S.: Use mp4 files instead of mov files. It's more widely supported by the browsers.
I am trying to insert a video in my webpage but in chrome its not showing i tried to run in elde its working there but i cant resize it.
<div class="parentDiv">
<video class="img/car.mp4" autoplay></video>
</div>
I made a parent div for the video container and place the video in there. I hope its correct. but cant resize the video as i want.
/* car video footer */
.parentDiv{
height: 30vh;
weight:100%;
background-color: rgb(148, 15, 96);
}
video{
object-fit: cover;
}
I created a responsive page using HTML and CSS with some screens(including video) viewing by vertical scroll. But on specific window size "960x540", video is not visible completely. I have to scroll down for viewing video.
So I want, if window resize then all content can be adjust according to it without vertical scroll bar.
Better to put your video as responsive. Like -
CSS:
video {
width: 100%;
height: auto;
}
HTML:
<video width="400" controls>
<source src="my_movie.mp4" type="video/mp4">
</video>
I am struggling with a stupid little thing. Working on this site:
(sorry for the slow server, school stuff you know)
The video you'll see is on height vh100, which is what i want. When I have this video on the max height of your browser the width of the video is not fullscreen.
The code I have now:
HTML
<!-- video -->
<video id="moodvideo" autoplay loop>
<source src="moodvideo.mp4" type='video/mp4'>
</video>
CSS
/* Video */
video {
height: 100vh;
width: 100vw;
}
What I am trying to achieve is the video on full screen, width 100wh and height 100vh. If the height (of the video with width 100wh) is bigger then the height 100vh, I want the video to crop so it will be on fullscreen view on the max width and height your browser. By cropping, I don't bother to missing some of the video (50px from the bottom or so), fullscreen in width and height is more important to me.
Now, I already searched and tried a lot before asking you guys, things like; vw100/vh100, min-height/width 100, add the movie in a div, div to 100 vh/vw, and some scripts I found but nothing really works...
You could use the jquery videoBG plugin: http://syddev.com/jquery.videoBG/
Or you could add the following code: https://jsfiddle.net/wcv2ak9p/1/
The alternative image is displayed when the browser doesn't support the video.
HTML
<video id="moodvideo" autoplay loop>
<source src="moodvideo.mp4" type='video/mp4'>
<img id="alternative" src="alternative.jpg" />
</video>
CSS
#moodvideo, #alternative {
width: 100vw; /* Could also use width: 100%; */
height: 100vh;
object-fit: cover;
position: fixed; /* Change position to absolute if you don't want it to take up the whole page */
left: 0px;
top: 0px;
z-index: -1;
}
Want to show a video in a bootstrap responsive site.
In my CSS file I defined the video tag width to be 100 % of the .span7 box and set the height to auto. Works very well on desktop when I change the width of the browser window. On iPhone it looks very well, too.
Only on iPad the video width is 100 % but height is only about 2 bootstrap rows. That's too small. Why that?
Why is the height so small on iPad in Safari mobile?
This is the trick I use for iPad:
<div class="video">
<canvas width="960" height="540"></canvas>
<video preload="none" width="960" height="540" controls poster="video.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
CSS:
.video {
position: relative;
}
.video video,
.video canvas {
top: 0;
left: 0;
width: 100%;
max-width: 100%;
}
video {
height: 100% !important;
position: absolute;
}
Works like a charm including the preview image (poster).