Support

Account

Home Forums ACF PRO YouTube Thumbnail Object with oEmbed field?

Solving

YouTube Thumbnail Object with oEmbed field?

  • Hello…Is it possible to automatically pull the YouTube Thumbnail when I embed a video on the page?

    Currently, I am trying to make a Video Gallery using the oEmbed field with the following code:

    <div class="embed-container">
    	<?php the_field('videos'); ?>
    </div>
    

    Is there a simple way for the embed field to return the Thumbnail Object for the youtube video?…

    If so, then I would be able to use the Lightbox to play the video whenever the thumbnail is clicked.

    Any kind of help would be greatly appreciated.

    Thanks!

  • +1 trying to do exactly this.

    Have you had any luck yet?

  • No luck yet…I am hoping someone here can help with this…

  • Writing from my phone, but I got this going, using this as a reference to write my own function:

    https://github.com/FindingSimple/acf-field-video/blob/master/video.php

    in conjunction with this:

    http://support.advancedcustomfields.com/forums/topic/getting-just-the-url-that-was-entered-into-an-oembed-field-inside-a-variable/

    Ill try to post more of what i ended up with tomorrow.

  • Yes, it’s possible, but you’ll have to do a bit of string matching to find the id. For example:

    
    $video = get_field( 'oembed_video' );
    
    preg_match('/src="(.+?)"/', $video, $matches_url );
    $src = $matches_url[1];	
    
    preg_match('/embed(.*?)?feature/', $src, $matches_id );
    $id = $matches_id[1];
    $id = str_replace( str_split( '?/' ), '', $id );
    
    var_dump( $id );

    And then to grab the thumbnail:

    <img src="http://img.youtube.com/vi/<?php echo $id; ?>/mqdefault.jpg">

    More info on YouTube thumbnails:
    http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

  • My solution is a bit more comprehensive than that of @scheurta, as it covers multiple video sources. Youtube, Vimeo, and Wistia.

    First off in functions.php:

    	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 = 'http://img.youtube.com/vi/' . $video['id'] . '/hqdefault.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'];
    		}
    		
    	}
    	

    And then in your template file choose one:

    For Single Field:

    <?php
    										//For use with a single field.
    										
    									 $video = get_field('video'); //Embed Code
    									  $video_url = get_field('video', FALSE, FALSE); //URL
    									  
    									  
    									  $video_thumb_url = get_video_thumbnail_uri($video_url); //get THumbnail via our functions in functions.php ?>
    									  
    									  
    									  <?php //Lightbox Link via Thumbnail ?>
    										<a href="#lightbox"><img src="<?php echo $video_thumb_url; ?>"/></a>
    										
    										<?php //Lightbox Element with Video Embed Code ?>
    										<div id="lightbox" class="embed-container">
    										<?php echo $video; ?>
    										</div>
    										
    										

    For Repeater Field:

    							
    									
    							<?php
    								//For Use with Repeater Field 
    								 $videos = get_field('videos');
    								 $videos_raw = get_field('videos', FALSE, FALSE);
    									
    								
    								//Add the Thubmnail to the $videos object
    									
    									foreach($videos_raw as $key => $video_raw) : 
    								
    											$videos[$key]['video_thumb'] = get_video_thumbnail_uri($video_raw['field_5449746362c3d']); //Replace 'field_5449746362c3d' with your field's Field key (obtainable by going to screen options in the fields admin, and setting 'Show Field Key' to 'Yes')
    								
    									endforeach;
    									
    								
    								
    								//Loop through the $videos object
    									foreach($videos as $video): ?>
    									
    										<?php //Lightbox Link via Thumbnail ?>
    										<a href="#lightbox"><img src="<?php echo $video['video_thumb']; ?>"/></a>
    										
    										<?php //Lightbox Element with Video Embed Code ?>
    										<div id="lightbox" class="embed-container">
    										<?php echo $video['video'] ?>
    										</div>
    									
    									<? endforeach; ?>
  • Thanks @scheurta and @EbbandFlow!!…Im trying to use the code you provided and it seems im getting close…however, im still struggling abit on getting it to all work properly…


    @EbbandFlow
    – I followed your code instructions and tested it for a ‘Single Field’ – but for some reason the lightbox doesnt seem to work properly…I managed to get the Thumbnail to show, however, the lightbox does not popup & link to the video…it also seems to be showing me results with the embedded video next to the thumbnail on the page…

    I then tested the Repeater, and im just getting a broken image…

    Unfortunately, my coding & debugging skills arent that great..by chance can you assist me alil further to hopefully get this working…

    This is the Field name im using for the Repeater: video
    This is the Sub Field im using for the oEmbed: video_url


    @EbbandFlow
    indeed your code is very comprehensive…ideally, if i can simplify it just for YouTube then that would be helpful…however, whatever we can do to make this work, would be great.


    @scheurta
    – I noticed yours is a simplified version, however, im still abit lost on how to put it together… :-/

    Any reply would be greatly appreciated.

  • @WPDragon i should have mentioned i just made up the markup without testing or looking at lightbox documentation — also if your using a repeater try this for testing:

    					
    <?php //For Use with Repeater Field 
    $videos = get_field('video');
    $videos_raw = get_field('video', FALSE, FALSE);
    									
    								
    //Add the Thubmnail to the $videos object
    									
    									foreach($videos_raw as $key => $video_raw) : 
    								
    											$videos[$key]['video_thumb'] = get_video_thumbnail_uri($video_raw['field_5449746362c3d']); 
    //Replace 'field_5449746362c3d' with your field's Field key (obtainable by going to screen options in the fields admin, and setting 'Show Field Key' to 'Yes')
    								
    endforeach;
    									
    								
    								
    //Loop through the $videos object
    									foreach($videos as $video): ?>
    									
    VIDEO THUMB URL: <?php echo $video['video_thumb']; ?>
    										
    							
    										
    										VIDEO EMBED: <?php echo $video['video_url'] ?>
    																		
    <? endforeach; ?>
  • Thanks @EbbandFlow – Unfortunately, im still running into issues…hmmm…this has been pretty frustrating…lol.. :-/

    However, I appreciate your help to this point. thanks.

  • @wpdragon, what is or isn’t happening? are you able to get the URL to show at all?

    Is you oEmbed field within the repeater? or a field of its own?

    Are you getting any errors?

  • @EbbandFlow, well…im trying to get this to work with the Repeater.

    At first, I had an ‘endwhile’ error – but I believe that was due to what I assume was a typo in the code above.

    You had:

    foreach($videos as $video): ?>

    and I switched the colon to a semi-colon – and that seemed to fix the ‘endwhile’ error that I was getting.

    foreach($videos as $video); ?>

    Basically, the steps I did was…

    — I copied and paste the code you included specifically for the Functions.php

    — I then, used the recent Repeater code above on my template page where I wanted the video thumbnails to show.

    — I created a Repeater field type, with the field named as: ‘video’

    — Within the Repeater field type, I created a Sub Field (oEmbed) named: ‘video_url’

    — The field key I am using (as mentioned in the code) is from my Repeater field type (‘video’) ex: field_544302b1vr92e

    — I then go to my created post, and add a Youtube URL (as usual) within the repeater section and update the post page…

    At this point, I dont get any errors – but, I also do not get any YouTube Thumbnail or videos results either…hmmm…am i missing something? :-/

  • Well that colon is 100% a colon or a { depending on your syntax.

    the endwhile error most likely refers to you missing an end tag somewhere… Can you provide your template file and functions file?

  • Hello @ebbandflow

    I’m sorry to reopen such an old thread. I’ve tried your code and it work simply perfectly both for Youtube and Wistia. Unfortunately if I try to use it with a Vimeo video it returns nothing. Given the following code (in the template file):

    <?php
    	$video_url = get_field('my_video_field', FALSE, FALSE); //URL
    	$video_thumb_url = get_video_thumbnail_uri($video_url); // get Thumbnail via our functions in functions.php
    ?>
    <img src="<?php echo $video_thumb_url; ?>" alt="">

    this is the output:
    <img src="" alt="">

    As I said, with Youtube and Wistia this is working perfectly. Have you got any idea about why it’s not working with Vimeo?

    Thanks!

  • A more universal way would be to get the thumbnail via oEmbed API.

    
    //second false skip ACF pre-processcing
    $url = get_field('videos', false, false);
    //get wp_oEmed object, not a public method. new WP_oEmbed() would also be possible
    $oembed = _wp_oembed_get_object();
    //get provider
    $provider = $oembed->get_provider($url);
    //fetch oembed data as an object
    $oembed_data = $oembed->fetch( $provider, $url );
    $thumbnail = $oembed_data->thumbnail_url;
    $iframe = $oembed_data->html;
    
  • @koko-ng That worked well, thanks.

  • Hi, is there a way to get a larger version of the thumbnails using @koko-ng method? The thumbnail size its pulling is 640×360, the video is 1920×1080. I would like to access the small/medium/large/original sizes provided.

    Thanks!

  • I’m also wondering how one would change from the default video thumbnail. hqdefault isn’t the right aspect ratio due to the black bars on top and bottom. mqdefault is the correct aspect ratio for my needs. @mando did you ever get it figured out using @koko-ng method? Any advice is greatly appreciated!

  • Hi, I am trying @koko-ng solution but having an error on this line $thumbnail = $oembed_data->thumbnail_url;

    The error is Notice: Trying to get property of non-object in...

  • There is a way to request larger thumbnails for @koko-ng method by adding in additional arguments to the oembed request. It definitely works with vimeo, not sure about Youtube though.

    function get_video_thumbnail_uri( $video_uri, $max_width = 960, $max_height = 540 ) {
    	$thumbnail_uri = '';
    	
    	//get wp_oEmed object, not a public method. new WP_oEmbed() would also be possible
    	$oembed = new WP_oEmbed();
    	//get provider
    	$provider = $oembed->get_provider($video_uri);
    	//fetch oembed data as an object
    	$oembed_data = $oembed->fetch( $provider, $video_uri, array( 'width' => $max_width, 'height' => $max_height ) );
    	//print_r($oembed_data);
    	$thumbnail_uri = $oembed_data->thumbnail_url;	
    
    	// get default/placeholder thumbnail
    	if( empty( $thumbnail_uri ) || is_wp_error( $thumbnail_uri ) ){
    		$thumbnail_uri = ''; 
    	}
    
    	//return thumbnail uri
    	return $thumbnail_uri;
    }
Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘YouTube Thumbnail Object with oEmbed field?’ is closed to new replies.