Резиновые видео Youtube

TIGRA

Захожу иногда
72
0 / 0

Всем здравствуйте.

Хочу настроить вывод резиновых видео Youtube в К2 из вкладки "Медиа".

Нашел хороший способ, он отлично работает, если видео одно. Если видео несколько, то через админку я вставляю так:

Код

<iframe...></iframe>
<iframe...></iframe>

На сайте это выглядит так:

Код

<div class="itemVideoEmbedded">
<iframe...></iframe>
<iframe...></iframe>
</div>

В этом случае одно видео накладывается на другое.

Т.к. чаще всего видео одно, то хотелось бы, чтобы при вставке одного <iframe...></iframe> все работало как сейчас. Если видео несколько, то я не против нагородить какие-нибудь хитрые конструкции с этими iframe, вот только не знаю какие...

Пример страницы, где реализовано то, о чем я писал выше:
https://crimea-news.net/proisshestviya/item/7041-masshtabnym-pozharom-v-zapovednike-zavershilos-prazdnovanie-180-letnego-yubileya-yalty-foto-video.html

На самом деле на ней 2 видео - одно накладывается на другое, и как это решить я не знаю.

П.С. Понятно, что для решения этой задачи нужно сделать так:

Код

<div class="itemVideoEmbedded">
<iframe...></iframe>
</div>
<div class="itemVideoEmbedded">
<iframe...></iframe>
</div>

Я пытаюсь найти какое-нибудь универсальное решение, которое объединяло бы в себе оба эти пункта:
- при вставке через админку <iframe...></iframe>, на сайте отображалось резиновое видео.
- при вставке нескольких видео, они были резиновыми одно под другим (тут можно помудрить, т.к. такое бывает не часто).

По отдельности знаю, а вместе нет. Буду благодарен за любую помощь.

Еще важный нюанс: нет возможности ставить в iframe width="100%"

Записан

xpank

Захожу иногда
448
41 / 0

Re: Резиновые видео Youtube

« Ответ #1 : 09.10.2018, 08:37:30 »

А так вставлять не пробовали?

Код

<div>
<iframe...></iframe>
</div>
<div>
<iframe...></iframe>
</div>

Тогда должно получиться так:

Код

<div class="itemVideoEmbedded">
<div>
<iframe...></iframe>
</div>
<div>
<iframe...></iframe>
</div>
</div>

P.S. С К2 не сталкивался.

« Последнее редактирование: 09.10.2018, 08:44:06 от xpank »

Записан

TIGRA

Захожу иногда
72
0 / 0

Re: Резиновые видео Youtube

« Ответ #2 : 09.10.2018, 11:01:48 »

xpank, результат тот же.

Я не специалист в верстке, но насколько понял, весь смысл в том, что для <div class="itemVideoEmbedded"> задается padding-bottom: 56.25%;
Это от ширины. Получается при ширине 100% высота всегда 56.25% от ширины. Для одного видео - это идеально. У видео Youtube примерно такие пропорции.

Но как только видео несколько, нужно как-то отменить эти 56.25% у <div class="itemVideoEmbedded">, т.к. в такой блок вставить 2 видео невозможно. Вот в этом загвоздка.

Но возможно я зациклился на этом, и не вижу какого-то простого решения?

Записан

xpank

Захожу иногда
448
41 / 0

Re: Резиновые видео Youtube

« Ответ #3 : 09.10.2018, 13:42:55 »

Посмотрел разметку. Там вся проблема в том, что фреймам задано абсолютное позиционирование с проставленными координатами их положения, вследствие чего они и оказываются друг на друге. Короче нужно поправить стили:
/templates/ts_dailytimes/css/k2.css

Код

.catItemVideoEmbedded, .itemVideoEmbedded {
	position: relative;
	padding-bottom: 0; // это как раз тот самый - padding-bottom: 56.25%; и в данном случае такой большой отступ не нужен.
	padding-top: 0;
	height: auto;
	overflow: hidden;
}

.catItemVideoEmbedded iframe,
.catItemVideoEmbedded object,
.catItemVideoEmbedded embed,
.itemVideoEmbedded iframe,
.itemVideoEmbedded object,
.itemVideoEmbedded embed {
	/* position: absolute; */
	/*top: 0;*/
	/*left: 0;*/
	width: 100%;
	/* height: 100%; */
}

Записан

TIGRA

Захожу иногда
72
0 / 0

Re: Резиновые видео Youtube

« Ответ #4 : 09.10.2018, 13:57:27 »

xpank, ваше решение работает.
Спасибо большое!

Записан

Шаблон jm MyPlace - не воспроизводится видео Автор THE KILLERS	Ответов: 2 Просмотров: 3630	23.07.2024, 13:58:16 от THE KILLERS
Убегает вниз правая колонка после вставки видео из одноклассников Автор sibdes	Ответов: 0 Просмотров: 889	10.06.2020, 05:40:57 от sibdes
Не показывается реклама в роликах YouTube на моем сайте Автор Se	Ответов: 22 Просмотров: 3294	21.02.2017, 10:36:10 от vprs
Полноэкранный режим просмотра видео youtube в lightbox от Uikit Автор viteg	Ответов: 5 Просмотров: 1938	04.12.2016, 14:54:44 от viteg
joomshoping - шаблон сравнения вывести видео Автор pavel2950	Ответов: 0 Просмотров: 899	01.12.2016, 20:36:48 от pavel2950

Резиновые видео Youtube - Joomla 3.x: Шаблоны, разметка и макеты вывода

Новости Joomla

👩‍💻 Компонент "CS Афиши" для Joomla.

Яндекс выпустил инструмент Видимость сайта в Алисе AI.

👩‍💻 ИИ-админ для Joomla ближе, чем вы думаете: Joomla MCP.

TIGRA

Резиновые видео Youtube

xpank

Re: Резиновые видео Youtube

TIGRA

Re: Резиновые видео Youtube

xpank

Re: Резиновые видео Youtube

TIGRA

Re: Резиновые видео Youtube

Похожие темы