Как сделать превью youtube видео для галереи?

Question

[igix]

Добрый.

Есть подобие галереи - сверху большое окно для показа полноразмерного фото/видео, а снизу превью в виде этих фото и видео (5 шт).
При клике на превью, jquery берет атрибут в виде ссылки на фото или код видео (iframe) и подставляет его в
саму галерею (большое окно сверху). Картинки меняются, но вот получить код видео и передать в окно галереи не могу, т.к. при клике на превью видео, видео начинает проигрываться в этой же превьюшке и код iframe в переменную не передается!
Фото и видео потом будут динамически подставляться (через ACF плагин или из контента поста).

Подскажите, как решить эту проблему?

Вот примерно то, что я хочу - https://smartslider3.com/video-slider/#one

Или посоветуйте видео+фото галерею с превью снизу, чтобы можно было динамически выводить эти фото/видео из поста.

Спасибо!

Answer 1

[Орхан Гасанлы]

Здравствуйте!

Можно использовать ACF (Repeater например) + скрипт для создания карусели.
Пример реализации с owl carousel (правда, по ссылке пример не совсем, как ваш, но наверное если покопаться в докуметации, то можно найти нужный вам стиль) - https://owlcarousel2.github.io/OwlCarousel2/demos/...
или например, вот этот слайдер - flexslider.woothemes.com/video.html

Вроде тут пытались реализовать нечто при помощи Flexslider с миниатюрами видео https://stackoverflow.com/questions/11710188/jquer...

Кстати, если вам нужно получить миниатюры из ютуб и других агрегаторов, то можно использовать следующий код. Можно использовать с типом поля oembed ACF

// Grab video thumbnail from oembed
function get_video_thumbnail_uri( $video_uri ) {
	$thumbnail_uri = '';
	// determine the type of video and the video id
	$video = parse_video_uri( $video_uri );
	// get youtube thumbnail
	if ( $video['type'] == 'youtube' )
		$thumbnail_uri = 'https://img.youtube.com/vi/' . $video['id'] . '/mqdefault.jpg';
	// get vimeo thumbnail
	if( $video['type'] == 'vimeo' )
		$thumbnail_uri = get_vimeo_thumbnail_uri( $video['id'] );
	// get wistia thumbnail
	if( $video['type'] == 'wistia' )
		$thumbnail_uri = get_wistia_thumbnail_uri( $video_uri );
	// get default/placeholder thumbnail
	if( empty( $thumbnail_uri ) || is_wp_error( $thumbnail_uri ) )
		$thumbnail_uri = ''; 
	//return thumbnail uri
	return $thumbnail_uri;
}
// Parse the video uri/url to determine the video type/source and the video id
function parse_video_uri( $url ) {
	// Parse the url 
	$parse = parse_url( $url );	
	// Set blank variables
	$video_type = '';
	$video_id = '';
	// Url is http://youtu.be/xxxx
	if ( $parse['host'] == 'youtu.be' ) {
	$video_type = 'youtube';
	$video_id = ltrim( $parse['path'],'/' );	
}
// Url is http://www.youtube.com/watch?v=xxxx 
// or http://www.youtube.com/watch?feature=player_embedded&v=xxx
// or http://www.youtube.com/embed/xxxx
if ( ( $parse['host'] == 'youtube.com' ) || ( $parse['host'] == 'www.youtube.com' ) ) {
	$video_type = 'youtube';
	parse_str( $parse['query'] );
	$video_id = $v;	
		if ( !empty( $feature ) )
			$video_id = end( explode( 'v=', $parse['query'] ) );
		if ( strpos( $parse['path'], 'embed' ) == 1 )
			$video_id = end( explode( '/', $parse['path'] ) );
			
}
		
// Url is http://www.vimeo.com
if ( ( $parse['host'] == 'vimeo.com' ) || ( $parse['host'] == 'www.vimeo.com' ) ) {
	$video_type = 'vimeo';
	$video_id = ltrim( $parse['path'],'/' );	
						
}
	$host_names = explode(".", $parse['host'] );
	$rebuild = ( ! empty( $host_names[1] ) ? $host_names[1] : '') . '.' . ( ! empty($host_names[2] ) ? $host_names[2] : '');
// Url is an oembed url wistia.com
if ( ( $rebuild == 'wistia.com' ) || ( $rebuild == 'wi.st.com' ) ) {
		$video_type = 'wistia';		
	if ( strpos( $parse['path'], 'medias' ) == 1 )
		$video_id = end( explode( '/', $parse['path'] ) );
}		
// If recognised type return video array
if ( !empty( $video_type ) ) {
	$video_array = array('type' => $video_type, 'id' => $video_id);
	return $video_array;
	} else {
		return false;
	}
		
}
//Takes a Vimeo video/clip ID and calls the Vimeo API v2 to get the large thumbnail URL.
function get_vimeo_thumbnail_uri( $clip_id ) {
	$vimeo_api_uri = 'http://vimeo.com/api/v2/video/' . $clip_id . '.php';
	$vimeo_response = wp_remote_get( $vimeo_api_uri );
		if( is_wp_error( $vimeo_response ) ) {
			return $vimeo_response;
		} else {
			$vimeo_response = unserialize( $vimeo_response['body'] );
			return $vimeo_response[0]['thumbnail_large'];
		}
		
}
//Takes a wistia oembed url and gets the video thumbnail url.
function get_wistia_thumbnail_uri( $video_uri ) {
	if ( empty($video_uri) )
		return false;
		$wistia_api_uri = 'http://fast.wistia.com/oembed?url=' . $video_uri;
		$wistia_response = wp_remote_get( $wistia_api_uri );
		if( is_wp_error( $wistia_response ) ) {
			return $wistia_response;
		} else {
			$wistia_response = json_decode( $wistia_response['body'], true );
			return $wistia_response['thumbnail_url'];
		}
		
}