Вывести через fancybox или litebox видео youtube и превьюшку

Description: Прочии темы
Moderator: Aleksandr

TeLEpat
Topic author, Рядовой
Рядовой
Avatar
TeLEpat
Topic author, Рядовой
Рядовой
Reputation: 0
Posts: 7
Joined: 18 Mar 2016
With us: 3 years 8 months

#1by TeLEpat » 31 Oct 2019, 21:00

Как вывести видео через fancybox или litebox с превью youtube изображением ?

Через litebox никак.
Можно вынести через fancybox
вот ссылка http://fancyapps.com/fancybox/3/. Скачиваем , заходим в папку \dist , берем минимизированные Js и css файл. Дописываем в header нужной страницы. Этот код для bitrix.
Вот изначальный код из документации

Code: Select all

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
YouTube video
<img src="paths">
</
a


Если нужно превью , то воспользуемся функцией php

Code: Select all

function getYoutubeVideoID($url){
 
    
// допустимые доменые имена в ссылке
    
$names = array('www.youtube.com','youtube.com');
 
    
// разбор адреса
    
$up parse_url($url);
 
    
// проверка параметров
    
if (isset($up['host']) && in_array($up['host'],$names) &&
        isset(
$up['query']) && strpos($up['query'],'v=') !== false){
 
        
// достаем параметр ID
        
$lp explode('v=',$url);
 
        
// отсекаем лишние параметры
        
$rp explode('&',$lp[1]);
 
        
// возвращаем строку, либо false
        
return (!empty ($rp[0]) ? $rp[0] : false);
    }
    return 
false;
}
// массив ссылок ютуба
$mass_video_url=array(
'https://www.youtube.com/watch?v=_sI_Ps7JSEk',
'https://www.youtube.com/watch?v=_sI_Ps7JSEk',
'https://www.youtube.com/watch?v=_sI_Ps7JSEk',
);
// массив в который соберем src изображений с ютуба
$mass_video_foto=array();
foreach (
$mass_video_url as $key=>$url){            
            
$src='http://img.youtube.com/vi/'.getYoutubeVideoID($url).'/0.jpg';    
            
//собираем в массив.
            
$mass_video_foto[]=$src;
            
// или сразу выводим
            
echo '<a data-fancybox href="'.$mass_video_url[$key].'" ><img style="width:100px; margin-right:10px;" src="'.$src.'"></a>';
        } 

! ! !


  • Similar Topics
    Replies
    Views
    Last post

Return to “Прочее”