Блог

Главная - Вопросы по программированию - Почему я не могу изменить ширину видео в CSS?

Почему я не могу изменить ширину видео в CSS?

#css

Вопрос:

В CSS-изображении В HTML-изображении я хочу изменить ширину видео, но не могу изменить. Я также не могу изменить html. Пожалуйста, кто-нибудь, помогите мне. Вот мой код

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

Комментарии:

1. можете ли вы создать jsfiddle на живом примере?

2. Вероятно, это связано с компонентом, внутри которого находится видео?

Ответ №1:

Вам нужно будет завернуть любой CSS в теги стилей, как показано ниже:

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

Альтернативой вышеизложенному является использование отдельного файла, который выглядит чище и проще в обслуживании. Я предлагаю прочитать об этом больше здесь

Комментарии:

1. Спасибо за ваш ответ. Этот код является частью моего кода, вот полный код:

Ответ №2:

Надеюсь, это решит проблему соотношения сторон.

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>

Комментарии:

1. Спасибо вам за ваше решение, но оно все равно не может работать для меня 🙁

2. поместите свое видео в контейнер и измените размер контейнера по своему усмотрению.

3. Хорошо, я попробую…

Ответ №3:

Вы можете обернуть video тег внутри a container , а затем определить необходимые размеры для container . Видео внутри контейнера изменит свой размер, чтобы соответствовать контейнеру.

Я добавил некоторую подкладку и желтый фон container , чтобы было легче понять, что происходит.

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

Ответ №4:

Попробуйте поместить свое видео в контейнер и изменить размер контейнера так, как вам нравится. Я создал контейнер и поместил видео внутри контейнера. вы можете скопировать этот код и заменить исходный файл, чтобы попробовать это.

 <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>
Метки: