Как сделать адаптивное видео с Youtube по ширине блока?

04.09.2020, 11:04. Показов 1316. Ответов 0

Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам

Встроил видео с ютуба
Ширину фрейма поставил 100% а вот с высотой проблема - если указать, она фиксирована и при сжатии чёрные полосы, если не указывать - видео вставляется очень узкое.

Пробовал стили по найденному в поиске варианту - вообще не пашет

Если во фрейме не указывать размеры вставляется мелким, если указывать - толку нет

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.thumb-wrap {
  position: relative;
  padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  height: 0;
  overflow: hidden;
}
.thumb-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
  outline-width: 0;
}

Добавлено через 2 часа 53 минуты

пока просто вручную для показа на широком экране проставил размеры для фрейма - при сжатии чёрные полосы сверху и снизу, т.е. ни сам фрейм ни родительский элемент не сжимаются по вертикали при сжатии экрана

Добавлено через 4 минуты
Всё - отбой!
Указанное решение полностью рабочее

просто стили не подцепились ...

IT_Exp

Эксперт

34794 / 4073 / 2104

Регистрация: 17.06.2006

Сообщений: 32,602

Блог

04.09.2020, 11:04

Ответы с готовыми решениями:

Как сделать форму добавления видео с youtube?
как сделать форму добавления видео с youtube??

Как с css сделать высоту блока равной его ширине при том что точное значение ширины не известно?
Ширина блока задана как "width: 100%", то есть 100% от родительского блока. Как задать высоту блока в процентах не от родителя а от своей...

Как сделать высоту равной ширине при ширине 100%?
как можно сделать элемент(например таблицу) квадратным, т.е. высота равна ширине(ширина 100%)

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

BasicMan

Эксперт

29316 / 5623 / 2384

Регистрация: 17.02.2009

Сообщений: 30,364

Блог

04.09.2020, 11:04

Помогаю со студенческими работами здесь

JQuery табы и видео с youtube, как остановить видео при переключении?
Дорогие друзья, нужна очень ваша помощь, ума не приложу как реализовать следующую задачу, есть JQUERY табы, список переключает табы, в...

Wordpress shortcode для ютуба [youtube] .[\youtube] как сделать?
Всем привет) Подскажите плииз, как втавить шорткод для ютуба на Wordpressе ..?

Как вставить нижнее подчёркивание по ширине блока после <h1>
Доброго времени суток! Очень нуждаюсь в Вашей помощи. Проблема в следующем - это только картинкой можно описать :) Нужно сделать черту...

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

Работа с видео на youtube, нужен массив [ссылка на видео, название видео]
Собственно с одной стороны есть экселевский документ с номерами, с другой стороны канал на ютубе. Задача прочитать все названия видео на...

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

Наверх