😎 » DARYA DLE » Плагины DLE » Вставка видео с Ютуба та Фейсбука в ДЛЕ шаблон
694 0  

Вставка видео с Ютуба та Фейсбука в ДЛЕ шаблон

Название: 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

 





Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023