Вставка видео с Ютуба та Фейсбука в ДЛЕ шаблон
Название: | video-soc |
Версия: | 1.0 |
Дата выпуска: | 07.04.2020 года |
Версия DLE: | 10 < |
Автор: | rullan |
Для того чтобы вставлять видео с ютуба и Фейсбука в полную новость DLE я использую дополнительные поля + переключатель для создания формы видео: горизонтальна (по умолчанию), вертикальная, квадратная.
1. Создаем три дополнительные поля:
youtube
fb-video
video-forma
--с значениями:
gorizont
vertikal
kavadrat
2) Вставка в полную новость ( fullstory.tpl ):
<!-- video -->
[xfgiven_youtube]
<div class="[ifxfvalue video-forma="kavadrat"]kavadrat[/ifxfvalue][ifxfvalue video-forma="gorizont"]gorizont[/ifxfvalue][ifxfvalue video-forma="vertikal"]vertikal[/ifxfvalue][ifxfvalue video-forma!="gorizont"]gorizont[/ifxfvalue]">
<div class="full-video"><iframe src="https://www.youtube.com/embed/[xfvalue_youtube]?wmode=transparent" allowfullscreen="" wmode="Opaque" title="YouTube video player" style="border:#fff 7px solid;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-border-radius:7px;border-radius:7px;" frameborder="0" height="420" width="560"></iframe><br><br></div>
</div>
[/xfgiven_youtube]
[xfgiven_fb-video]
<div class="[ifxfvalue video-forma="kavadrat"]kavadrat[/ifxfvalue][ifxfvalue video-forma="gorizont"]gorizont[/ifxfvalue][ifxfvalue video-forma="vertikal"]vertikal[/ifxfvalue][ifxfvalue video-forma!="gorizont"]gorizont[/ifxfvalue]">
<div class="full-video"><iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%[xfvalue_fb-video]&show_text=0&width=560" width="560" height="515" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe></div>
</div>
[/xfgiven_fb-video]
<!-- / video -->
3) Вставляем стили:
/* Видео Ютуб Фейсбук */
.gorizont, .vertikal, .kavadrat {overflow:hidden; margin:20px auto;height:auto;}
.gorizont {width:90%;height:600px;}
.vertikal {width:500px;height:650px;}
.kavadrat {width:560px;height:500px;}
.full-video {height:auto; overflow:hidden;}
.full-video, .full-video iframe {height:100%; width:100%;max-width:100%;}
@media (max-width: 570px) {
.gorizont, .vertikal, .kavadrat {width:100%;max-width:100%;}
}
Как вставлять видео?
Для ютуба:
В дополнительное поле youtube вставляем тот код что идет после слеша (под видео ютуб жмем кнопку - "Поделится")
Для фейсбука:
В дополнительное поле - fb-video :
2Fkamianetsplus%2Fvideos%2F2313231058969765%2F