Video & Audio

// Format detection in templates
switch ( $args['format'] ) {
    case 'video':
        visual_portfolio()->include_template( 'icons/play' );
        break;
    case 'audio':
        visual_portfolio()->include_template( 'icons/music' );
        break;
    case 'gallery':
        visual_portfolio()->include_template( 'icons/gallery' );
        break;
}

// class-custom-post-meta.php:244
public static function get_video_format_url( $post_id ) {
    $video_url = get_post_meta( $post_id, '_vp_format_video_url', true );
    return $video_url;
}

// class-custom-post-meta.php:159
public static function add_video_format_metabox( $post ) {
    $video_url = self::get_video_format_url( $post->ID );
    ?>
    <input class="vp-input" 
           name="_vp_format_video_url" 
           type="url" 
           value="<?php echo esc_attr( $video_url ); ?>" 
           placeholder="<?php echo esc_attr__( 'https://', 'visual-portfolio' ); ?>">
    <?php
}

https://www.youtube.com/watch?v=VIDEO_ID
https://youtu.be/VIDEO_ID

https://vimeo.com/VIDEO_ID

https://example.com/videos/my-video.mp4
https://example.com/videos/my-video.webm

// templates/popup/video-popup-data.php
<template class="vp-portfolio__item-popup"
    style="display: none;"
    data-vp-popup-video="<?php echo esc_url( $video_data['url'] ); ?>"
    data-vp-popup-poster="<?php echo $video_data['poster'] ? esc_url( $video_data['poster'] ) : ''; ?>">
    
    <?php if ( $video_data[ $title_source ] ) : ?>
        <h3 class="vp-portfolio__item-popup-title">
            <?php echo wp_kses_post( $video_data[ $title_source ] ); ?>
        </h3>
    <?php endif; ?>
    
    <?php if ( $video_data[ $description_source ] ) : ?>
        <div class="vp-portfolio__item-popup-description">
            <?php echo wp_kses_post( $content ); ?>
        </div>
    <?php endif; ?>
</template>

$video_data = [
    'url' => 'https://youtube.com/watch?v=...',
    'poster' => 'https://example.com/poster.jpg',
    'item_title' => 'Video Title',
    'item_description' => 'Video description',
    'item_author' => 'Author Name',
    'item_author_url' => 'https://example.com/author',
];

templates/icons/
  play.php      - Video icon
  music.php     - Audio icon
  gallery.php   - Gallery icon
  image.php     - Image icon

// templates/items-list/item-parts/icon.php:23
switch ( $args['format'] ) {
    case 'video':
        visual_portfolio()->include_template( 'icons/play' );
        break;
    case 'audio':
        visual_portfolio()->include_template( 'icons/music' );
        break;
}

// class-get-portfolio.php:763
if ( 'video' === $args['format'] ) {
    $video_url = Visual_Portfolio_Custom_Post_Meta::get_video_format_url( get_the_ID() );
}

// class-get-portfolio.php:2289
if ( 'video' === $args['format'] && $args['video'] ) {
    $item_data['video_url'] = $args['video'];
}

// class-get-portfolio.php:671
if ( 'video' === $args['format'] && isset( $img['video_url'] ) && $img['video_url'] ) {
    // Handle video poster image
}

case 'audio':
    visual_portfolio()->include_template( 'icons/music' );
    break;

$args['vp_opts']['items_click_action'] = 'popup_gallery';

if ( 'video' === $format && 'popup_gallery' === $click_action ) {
    // Display video icon
    visual_portfolio()->include_template( 'icons/play' );
}

// classes/3rd/plugins/class-fancybox.php
class Visual_Portfolio_3rd_Fancybox {
    // Integration with Fancybox for video popups
}

$poster = get_the_post_thumbnail_url( $post_id, 'large' );

// Video posters use lazy loading when enabled
if ( Visual_Portfolio_Images::$allow_vp_lazyload ) {
    $image = Visual_Portfolio_Images::add_image_placeholders( $image );
}

add_filter( 'vpf_video_url', function( $video_url, $post_id ) {
    // Add support for custom video provider
    if ( strpos( $video_url, 'custom-video-site.com' ) !== false ) {
        // Transform URL for embedding
        $video_url = str_replace( '/watch/', '/embed/', $video_url );
    }
    return $video_url;
}, 10, 2 );

.vp-portfolio__item-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.vp-portfolio__item-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

// Only load video iframe when popup opens
data-vp-popup-video="<?php echo esc_url( $video_url ); ?>"

add_filter( 'vpf_video_url', function( $url, $post_id ) {
    // Modify video URL before rendering
    return $url;
}, 10, 2 );

add_filter( 'vpf_video_popup_data', function( $data, $post_id ) {
    // Add custom data to video popup
    $data['custom_field'] = get_post_meta( $post_id, 'custom_meta', true );
    return $data;
}, 10, 2 );

add_action( 'vpf_template_icons_play', function() {
    // Custom play icon SVG
    ?>
    <svg><!-- Custom icon --></svg>
    <?php
});

echo do_shortcode( '[visual_portfolio 
    id="123" 
    content_source="post-based"
    posts_source="portfolio"
    posts_filter="true"
    posts_filter_taxonomy="portfolio_category"
    layout="tiles"
    items_click_action="popup_gallery"
]' );

// Query posts with different formats
$query = new WP_Query([
    'post_type' => 'post',
    'tax_query' => [
        [
            'taxonomy' => 'post_format',
            'field' => 'slug',
            'terms' => [
                'post-format-video',
                'post-format-audio',
                'post-format-gallery',
                'post-format-image',
            ]
        ]
    ]
]);

// Add self-hosted video URL
update_post_meta( $post_id, '_vp_format_video_url', 
    'https://example.com/videos/my-video.mp4' 
);

// Set post format
set_post_format( $post_id, 'video' );

// Ensure featured image is set
if ( ! has_post_thumbnail( $post_id ) ) {
    set_post_thumbnail( $post_id, $attachment_id );
}

.vp-portfolio__item-video {
    max-width: 100%;
    height: auto;
}