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>
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've to insert a vertical video on my website built using html css. the video must be in left side and it should be responsive. This code is displaying the vertical video on left side but on mobile it is not responsive. what I've to change here to make it responsive.
<div class="vert_video">
<video width="320" height="540" controls>
<source src="vertical_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
When i change width to 100% it shows the video on entire screen which looks weird on desktop. help me to make this video responsive.
I think you should add vert_video class to video element.
<div>
<video class="vert_video" controls>
<source src="vertical_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
Then, add media queries to your css file. In your media queries, you can set max-width or width, which would be useful for you.
/*this query will apply for the devices those have width smaller than 480px*/
#media (max-width: 480px) {
.vert_video {
width: 100%;
height: 100%;
}
}
.vert_video {
width: 75%;
height: 75%;
}
you can use this property in css to set your video's width and height based on device width and length
#media only screen and (max-width: 520px){
/* change the width and height of your video here using video property or the video containing class
it will update the width and height as soon the width of device will go less
than 520px, most of cell phones have width less than 520px(you can change
that too)
*/
}
I have a <video> tag in my HTML, that looks like this:
<video control>
<source src="[video_url].webm" type="video/webm">
<source src="[video_url].mp4" type="video/mp4">
<p>Your browser does not support this type of video</p>
</video>
This video is hosted on Cloudinary, and I'm doing an inline transform with the src to get a specific dimension (w_450,h_350).
The video by itself looks fine, however I have a media query where I shrink the video by 100px in both width and height to fit smaller screen sizes
#media screen and (max-width: 1000px) {
video { width: 350px; height: 250px }
}
And as you can see, the video container has a shadow that overflows past the width and height of the new container size. If I click play on the video, the box shadow persists.
How do I make the box-shadow for the controls fit the actual size of the container?
Rather than applying height width to the tag you should enclose it within a
<div>
<video control>
<source src="[video_url].webm" type="video/webm">
<source src="[video_url].mp4" type="video/mp4">
<p>Your browser does not support this type of video</p>
</video>
</div>
And then apply your css to the
#media screen and (max-width: 1000px)
{
div{ width: 350px; height: 250px }
video{ width: 100%; height: 100% }
}
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.
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;
}