Video plugin for wordpress with ajax filter

Question

WordPress

In general, the task is this. I need a video plugin in which there is a video category filter. Well, something like how portfolios are typically made in premium templates (tile preview image, filter by category, etc., etc.). Have you seen something similar for Wp only on the topic of video?
Here's something similar:

Here's something similar in style:

Answer 1

Hello!
In fact, this can be done without a plugin. But there is also a plugin. Ready-made plugin (you may have to dig a little in the plugin's documentation, as it says in detail how to use ajax, etc.)
Plugin - Essential Grid
https://codecanyon.net/item/essential-grid-wordpre...
If you plan to implement this "without a ready-made plugin", then you can do the following:
- create a custom post type for adding video.
Example -

//Видео
add_action('init', 'register_post_types');
function register_post_types(){
register_post_type('video', array(
    'label'  => 'Видео',
    'labels' => array(
      'name'               => 'Видео',
      'singular_name'      => 'Видео',
      'add_new'            => 'Добавить новое',
      'add_new_item'       => 'Введите заголовок',
      'edit_item'          => 'Редактирование видео',
      'new_item'           => 'Новое видео',
      'view_item'          => 'Посмотреть видео',
      'search_items'       => 'Искать видео',
      'not_found'          => 'Видео не найдено',
      'not_found_in_trash' => 'В корзине видео не найдено',
      'parent_item_colon'  => '',
      'menu_name'          => 'Видео',
    ),
    'description'         => 'Видео для сайта',
    'public'              => true,
    'publicly_queryable'  => true,
    'exclude_from_search' => false,
    'show_ui'             => true,
    'show_in_menu'        => true,
    'show_in_admin_bar'   => true,
    'menu_position'       => 24,
    'menu_icon'           => 'dashicons-format-video', 
    'capability_type'   => 'post',
    'map_meta_cap'      => true,
    'hierarchical'        => false,
    'supports'            => array('title','editor','author','thumbnail'),
    'taxonomies'          => array('videocat'),
    'has_archive'         => true,
    'rewrite'             => array('slug' => 'videos', 'with_front' => false),
    'query_var'           => true,
  ) );
}

- install ACF, use oembed field type to add video.
https://www.advancedcustomfields.com/resources/oembed/
Code for parsing video images from aggregators.

// 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'];
    }
    
}

- Connect the necessary scripts. For example, magnific popup to open a video when clicked in a popup.
dimsemenov.com/plugins/magnific-popup
An example of implementing a video with an atomic post type, with a custom field and a thumbnail parser -
https://md7.info/video
All that remains is to add the necessary code for ajax loading / sorting videos.