Skip to content

Instantly share code, notes, and snippets.

@yratof
Created June 2, 2015 12:35
Show Gist options
  • Save yratof/715a6386b79d9c333b9f to your computer and use it in GitHub Desktop.
Save yratof/715a6386b79d9c333b9f to your computer and use it in GitHub Desktop.
Getting the Video ID from ACF OEmbed, then using that ID to call in videos without bloat
<?php
/* 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;
}
}
.youtube-container {
display: block;
margin: 20px auto;
width: 100%;
max-width: 600px;
}
.youtube-player {
display: block;
width: 100%;
/* assuming that the video has a 16:9 ratio */
padding-bottom: 75.25%;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
cursor: hand;
cursor: pointer;
display: block;
}
img.youtube-thumb {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
height: auto;
}
div.play-button {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
}
#youtube-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<?php $row = 'videos';
if( have_rows($row) ) : echo '<div id="video_grid" class="wrap clearfix columns">';
while( have_rows($row) ): the_row();
// Pull in oembed, make it raw by adding false false to the field
$video = get_sub_field('video_url', false, false);
$v = parse_video_uri( $video );
$vid = $v['id'];
?>
<div class="column-3">
<div class="youtube-container">
<div class="youtube-player" data-id="<?php echo $vid; ?>"></div>
</div>
</div>
<?php endwhile; echo '</div>'; endif; ?>
<script>
(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = labnolThumb(v[n].dataset.id);
p.onclick = labnolIframe;
v[n].appendChild(p);
}
})();
function labnolThumb(id) {
return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("id", "youtube-iframe");
this.parentNode.replaceChild(iframe, this);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment