Created
July 7, 2021 20:18
-
-
Save brycejacobson/b25705f59ed09a76193fedfae5cfa066 to your computer and use it in GitHub Desktop.
ACF Get Videos from Oembed and Custom Thumbnail Size
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Get youtube video ID from URL | |
* | |
* @param string $url the video url. | |
* @return string Youtube video id or FALSE if none found. | |
*/ | |
function youtube_id_from_url( $url ) { | |
$pattern = | |
'%^# Match any youtube URL | |
(?:https?://)? # Optional scheme. Either http or https | |
(?:www\.)? # Optional www subdomain | |
(?: # Group host alternatives | |
vimeo\.com/ # vimeo | |
| youtu\.be/ # Either youtu.be, | |
| youtube\.com # or youtube.com | |
(?: # Group path alternatives | |
/embed/ # Either /embed/ | |
| /v/ # or /v/ | |
| /watch\?v= # or /watch\?v= | |
) # End path alternatives. | |
) # End host alternatives. | |
([\w-]{0,12}) # Allow 10-12 for 11 char youtube id. | |
$%x'; | |
$result = preg_match( $pattern, $url, $matches ); | |
if ( $result ) { | |
return $matches[1]; | |
} | |
return false; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="product-media__slider"> | |
<?php | |
while ( have_rows( 'videos' ) ) : | |
the_row(); | |
// vars. | |
$product_video = get_sub_field( 'video' ); | |
$product_video_url = get_sub_field( 'video', false, false ); | |
// get wp_oEmed object, not a public method. new WP_oEmbed() would also be possible. | |
$vid = youtube_id_from_url( $product_video_url ); | |
$oembed = _wp_oembed_get_object(); | |
// get provider. | |
$provider = $oembed->get_provider( $product_video_url ); | |
// fetch oembed data as an object. | |
$oembed_data = $oembed->fetch( $provider, $product_video_url ); | |
// use preg_match to find iframe src. | |
preg_match( '/src="(.+?)"/', $product_video, $matches ); | |
$src = $matches[1]; | |
// add extra params to iframe src. | |
$params = array( | |
'modestbranding' => 1, | |
'rel' => 0, | |
'enablejsapi' => 1, // needed for pause to happen on change. | |
); | |
$new_src = add_query_arg( $params, $src ); | |
$product_video = str_replace( $src, $new_src, $product_video ); | |
// add extra attributes to iframe html. | |
$attributes = 'frameborder="0"'; | |
$product_video = str_replace( '></iframe>', ' ' . $attributes . '></iframe>', $product_video ); | |
?> | |
<div class="featured-video product-video responsive-embed widescreen"> | |
<div class="youtube" data-embed="<?php echo $vid; ?>"> | |
<div class="play-button"></div> | |
<picture> | |
<source type="image/webp" srcset="https://i.ytimg.com/vi_webp/<?php echo $vid; ?>/maxresdefault.webp"> | |
<source srcset="https://i.ytimg.com/vi/<?php echo $vid; ?>/maxresdefault.jpg 2x, https://i.ytimg.com/vi/<?php echo $vid; ?>/hqdefault.jpg 1x"> | |
<img src="https://i.ytimg.com/vi/<?php echo $vid; ?>/maxresdefault.jpg" alt="Youtube"> | |
</picture> | |
<iframe class="hide"></iframe> | |
</div> | |
</div><!-- .product-video --> | |
<!-- <div class="product-video responsive-embed widescreen"> | |
<?php echo $product_video; ?> | |
</div>.product-video --> | |
<?php endwhile; ?> | |
</div><!-- .product-media__slider --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment