0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 1141 Просмотров
*

TIGRA

  • Захожу иногда
  • 72
  • 0 / 0
Резиновые видео Youtube
« : 08.10.2018, 22:47:37 »
Всем здравствуйте.

Хочу настроить вывод резиновых видео 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, ваше решение работает.
Спасибо большое!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Убегает вниз правая колонка после вставки видео из одноклассников

Автор sibdes

Ответов: 0
Просмотров: 627
Последний ответ 10.06.2020, 05:40:57
от sibdes
Не показывается реклама в роликах YouTube на моем сайте

Автор Se

Ответов: 22
Просмотров: 2917
Последний ответ 21.02.2017, 10:36:10
от vprs
Полноэкранный режим просмотра видео youtube в lightbox от Uikit

Автор viteg

Ответов: 5
Просмотров: 1656
Последний ответ 04.12.2016, 14:54:44
от viteg
joomshoping - шаблон сравнения вывести видео

Автор pavel2950

Ответов: 0
Просмотров: 669
Последний ответ 01.12.2016, 20:36:48
от pavel2950
Видео на фон

Автор kost757

Ответов: 12
Просмотров: 2384
Последний ответ 07.05.2016, 13:18:20
от MALECKY