Why can't I change video width in CSS?-CodePudding

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

CodePudding user response：

You will need to wrap any CSS in style tags, like the following:

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

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

An alternative to the above is to use a seperate file, which looks cleaner and is easier to maintain. I suggest reading up more on it here

CodePudding user response：

Hope this will resolve the aspect ratio problem.

HTML:

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

CSS:

<style>    
#myVideo {
         width: 100%;
         height: 600px;
         object-fit: cover;
         z-index: -100;}`
</style>

CodePudding user response：

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>

CodePudding user response：

Try to place your video inside a container and change the container size as you like. I have created a container and placed the video inside the container. you can copy this code and replace the source file to try this.

<style>

.videoContainer {
    height: 200px;
    width: 400px;   
}

#myVideo {
  width: 100%;
  height: 100%;
}
</style>

<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>