Why can't I change video width in CSS?

Issue

In HTML Pic In CSS PicI want to change video’s width but I can’t change. I cannot also change in html too. Please someone help me. Here is my code

<video autoplay muted loop id="myVideo" width="290">
    <source src="img/retakevalorant.mp4" type="video/mp4">
</video>

#myVideo{
    width: 100%;
    height: 600px;
    object-fit: cover;
}

Solution

You can wrap the video tag inside a container and then define the desired dimensions for the container. The video inside the container will resize itself to fit the container.

I added some padding and a yellow background to the container so that it’s easier to understand what is happening.

.videoContainer {
    height: 200px;
    width: 400px;   
    padding: 15px;
    background: yellow;
}

#myVideo {
  width: 100%;
  height: 100%;
}
<div class="videoContainer">
    <video autoplay loop controls muted id="myVideo">
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
   </video>
</div>

Answered By – Vaibhav

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published