如何在 html css 上制作响应式垂直视频？

Question

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.

Answer 1

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%;
}

Answer 2

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)
     */

}