How to make a preview youtube video to the gallery?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
26 views
Good.

There is a kind of a gallery from top large window to display full size photo/video, and the bottom preview these photos and videos (5 PCs).
When you click on preview, jquery takes attribute to links to photos or video code (iframe) and inserts it into
very gallery (big window top). The pictures will change, but here is a video code and upload it to the gallery I can not, because when you click on the preview video, the video starts playing in the preview window and the iframe code in a variable not passed!
Photos and videos will then be dynamically populated (via ACF plugin, or from the content of the post).

Tell me how to solve this problem?

This is roughly what I want https://smartslider3.com/video-slider/#one

Or advise video+photo gallery with thumbs on the bottom, so you can dynamically display those photos/videos from the post.

Thank you!
by | 26 views

1 Answer

0 like 0 dislike
Hello!

You can use ACF (Repeater for example) + a script to create the carousel.
An example implementation of owl carousel (though the link example is not quite like yours, but probably if you dig into dokumentatsii, you can find your desired style) - https://owlcarousel2.github.io/OwlCarousel2/demos/...
or for example with this slider flexslider.woothemes.com/video.html

Like here tried to implement something using Flexslider with thumbnail video https://stackoverflow.com/questions/11710188/jquer...

By the way, if you need to get the thumbnails from YouTube and other aggregators, then you can use the following code. You can use with the oembed field type ACF
// Grab the thumbnail of video from oembed get_video_thumbnail_uri function( $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 parse_video_uri function( $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. get_vimeo_thumbnail_uri function( $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. get_wistia_thumbnail_uri function( $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']; } }
by

Related questions

0 like 0 dislike
3 answers
asked Jun 6, 2019 by AlibekKulseitov
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,187 answers
0 comments
40,796 users