Skip to content

Instantly share code, notes, and snippets.

@halgatewood
Last active December 18, 2015 14:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save halgatewood/5800411 to your computer and use it in GitHub Desktop.
Save halgatewood/5800411 to your computer and use it in GitHub Desktop.
Add a icon on top of the video by creating a youtube.png image and putting it in a 'images' folder in your theme.
<?php
/**
* Plugin Name: YouTube Video Widget
* Plugin URI: http://halgatewood.com/
* Description: Awesome YouTube Widget that allows single videos or latest video from channel. Uses transient api to keep it quick.
* Author: Hal Gatewood
* Author URI: http://halgatewood.com/
* Version: 1.0
* License: GPL v2 - http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*
* CSS AT BOTTOM OF GIST
*
*/
class YouTubeWidget extends WP_Widget
{
function YouTubeWidget()
{
$widget_ops = array('classname' => 'YouTubeWidget', 'description' => 'Add a YouTube Video to the sidebar' );
$this->WP_Widget('YouTubeWidget', 'YouTube Video', $widget_ops);
}
function form($instance)
{
$instance = wp_parse_args( (array) $instance, array( 'title' => 'Watch our Video', 'youtube_url' => '' ) );
$title = $instance['title'];
$youtube_url = $instance['youtube_url'];
$youtube_channel = $instance['youtube_channel'];
?>
<p>
<label for="<?php echo $this->get_field_id('youtube_channel'); ?>">
YouTube Username:
<input class="widefat" id="<?php echo $this->get_field_id('youtube_channel'); ?>" name="<?php echo $this->get_field_name('youtube_channel'); ?>" type="text" value="<?php echo attribute_escape($youtube_channel); ?>" />
<small>(pulls in latest video)</small>
</label>
</p>
<p>
<label for="<?php echo $this->get_field_id('youtube_url'); ?>">
Specific YouTube Video URL:
<input class="widefat" id="<?php echo $this->get_field_id('youtube_url'); ?>" name="<?php echo $this->get_field_name('youtube_url'); ?>" type="text" value="<?php echo attribute_escape($youtube_url); ?>" />
<small>(override latest and use specific video)</small>
</label>
</p>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">
Override Title:
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" />
</label>
</p>
<?php
} // end form function
function update($new_instance, $old_instance)
{
$instance = $old_instance;
$instance['title'] = $new_instance['title'];
$instance['youtube_url'] = $new_instance['youtube_url'];
$instance['youtube_channel'] = $new_instance['youtube_channel'];
return $instance;
}
function getYouTubeIdFromURL($url)
{
$pattern = '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i';
preg_match($pattern, $url, $matches);
return isset($matches[1]) ? $matches[1] : false;
}
function widget($args, $instance)
{
extract($args, EXTR_SKIP);
$video_url = "";
if($instance['youtube_channel'])
{
$transient_name = 'latest_video_' . $youtube_channel;
$youtube_channel = $instance['youtube_channel'];
if( get_transient( $transient_name ) )
{
$video_data = get_transient( $transient_name );
$video_url = $video_data['url'];
$video_title = $video_data['title'];
}
else
{
$json = json_decode( file_get_contents( "http://gdata.youtube.com/feeds/api/users/" . $youtube_channel . "/uploads?v=2&alt=jsonc" ) );
$user_videos = $json->data->items;
if($user_videos[0])
{
$latest_video = $user_videos[0];
$video_url = "http://www.youtube.com/watch?v=" . $latest_video->id;
$video_title = $latest_video->title;
}
$transient_data = array( 'url' => $video_url, 'title' => $video_title );
set_transient( $transient_name, $transient_data, 3600 );
}
}
else
{
$video_url = $instance['youtube_url'];
}
if(empty($video_url)) { return; } // NO VIDEO URL, RETURN NOTHING
$title = empty($instance['title']) ? $video_title : apply_filters('youtube_widget_title', $instance['title']);
$youtube_id = $this->getYouTubeIdFromURL( $video_url );
?>
<li id="<?php echo $widget_id; ?>" class="youtube widget">
<?php if ( $title ) echo $before_title . $title . $after_title; ?>
<div class="video">
<a href="http://www.youtube.com/embed/<?php echo $youtube_id; ?>?rel=0&amp;wmode=transparent&amp;autoplay=1" class="fancybox youtube iframe"><img class="thumbnail" src="http://img.youtube.com/vi/<?php echo $youtube_id; ?>/hqdefault.jpg" /></a>
<a href="http://www.youtube.com/embed/<?php echo $youtube_id; ?>?rel=0&amp;wmode=transparent&amp;autoplay=1" class="fancybox youtube iframe"><img class="play" src="<?php echo get_template_directory_uri(); ?>/images/youtube.png" alt="" /></a>
</div>
<script>
jQuery(document).ready(function ()
{
jQuery('a.fancybox.youtube').colorbox({iframe:true, innerWidth:640, innerHeight:390});
});
</script>
</li>
<?php
}
}
add_action( 'widgets_init', create_function('', 'return register_widget("YouTubeWidget");') );
/*
ADD THIS CSS
.youtube.widget .video { position: relative; padding: 0 20px 20px 20px; }
.youtube.widget .video img.thumbnail { width: 100%; height: auto; }
.youtube.widget .video img.play {
position: absolute;
width: 72px;
height: 72px;
left: 50%;
top: 50%;
z-index: 10;
margin-top: -36px;
margin-left: -36px;
opacity: 0.75;
transition: opacity 0.35s;
-moz-transition: opacity 0.35s;
-webkit-transition: opacity 0.35s;
-o-transition: opacity 0.35s;
}
.youtube.widget .video img.play:hover,
.youtube.widget .video:hover img.play { opacity: 1; }
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment