Изменение или определение высоты и ширины по умолчанию для самостоятельного размещения видео на wordpress - PullRequest
0 голосов
/ 10 июля 2020

Я вручную загружаю видео на свой сайт Wordpress, я загружаю их и использую функцию видеоблоков на странице сообщений, чтобы вставлять их в сообщения. После того, как я открываю пост, видео нет в контейнере. Ширина x высота составляет 1900x800 пикселей, он проходит слева направо, покрывая всю боковую панель, а внизу покрывает область связанных сообщений.

Я хочу, чтобы видео имели высоту по умолчанию (для всех видео). Когда я проверяю элемент, чтобы проверить наличие элементов, чтобы я мог использовать пользовательский css для его исправления, он показывает следующее

<video controls="" src="https://site/wp-content/uploads/2020/07/videoname.mp4"></video>

Я пытался использовать следующий пользовательский css (один за другим)

.video {
    width: 100px;
    height: 250px;
}

.video src {
    width: 100px;
    height: 250px;
}

.video control src {
    width: 100px;
    height: 250px;
 }

, но ничего из этого не меняет, и видеоплеер остается прежним.

Классов css нет, страница сообщений WordPress html показывает это

<figure class="wp-block-video"><video controls src="https://site/wp-content/uploads/2020/07/videoname.mp4"></video></figure>

1 Ответ

1 голос
/ 10 июля 2020

Проблема в том, что вы неправильно используете селекторы CSS. Вы используете .video, чтобы попытаться выбрать элемент <video>.

  • Чтобы выбрать элемент , используйте только имя тега элемента, например video, div, p et c
  • Чтобы выбрать класс , поставьте перед именем класса . например, .myvideoclass
  • Чтобы выбрать элемент, который имеет определенный класс c, используйте как имя тега элемента, так и класс (без пробелов между ними), например video.myvideoclass

Итак, в вашем случае вы должны использовать:

video {
    width: 100px;
    height: 250px;
}

Если вы хотите использовать класс, вы можете добавить класс к элементу видео в html (без .), а затем выбрать класс в CSS с . например

<video class="myvideoclass" controls="" src="https://site/wp-content/uploads/2020/07/videoname.mp4"></video>

/* select any element with the class "myvideo" */
.myvideoclass{
    width: 100px;
    height: 250px;
}

/* Or to select ONLY video elements with the class "myvideo" */
video.myvideoclass{
    width: 100px;
    height: 250px;
}

Я предлагаю вам сделать несколько онлайн-руководств о CSS он понимает, как вы его используете, это хорошая отправная точка: Mozilla Developer CSS учебник

...