Open YouTube Video Post in FacyBox
Description
This code opens Youtube videos using Fancybox which is when the video pop out of the screen without refreshing the page. In order for this code to work you must ensure that you have thumb.php and fancybox.js uploaded to the correct directory. Also you must create custom fields called “YouTube Long Link” and “url”. YouTube Long […]
This code opens Youtube videos using Fancybox which is when the video pop out of the screen without refreshing the page. In order for this code to work you must ensure that you have thumb.php and fancybox.js uploaded to the correct directory. Also you must create custom fields called “YouTube Long Link” and “url”. YouTube Long Link is retrieved from the embeding options in YouTube and the url is the image that you would like to use to represent the video. The image cannot be a .png, jpeg or jpg should work.
JavaScript Code
<script type="text/javascript">
jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 740,
'height' : 485,
'href' : this.href.replace(new RegExp("watch?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
</script>
<!-- Post Starts -->
<?php
query_posts('cat=7&posts_per_page=1&orderby=date&order=desc'); // query to show all posts independently
if (have_posts()) :
while (have_posts()) :the_post(); ?>
<?php if($values = get_post_custom_values("YouTube Long Link")){?>
<div class="video-container">
<div class="video-image">
<a class="video" title="<?php the_title_attribute(); ?>" href="<?php $values = get_post_custom_values("YouTube Long Link"); echo ($values[0] ? $values[0] : "" ); ?>?autoplay=1">
<img src="/wp-content/themes/aiog5/thumb.php?src=<?php $values = get_post_custom_values("url"); echo ($values[0] ? $values[0] : "" ); ?>&w=290&h=270&zc=1&q=200"
alt="<?php the_title(); ?>"
style="opacity:1.0;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=40" />
</a>
</div>
</div>
<?php }; ?>
<?php endwhile;
endif;
wp_reset_query();
?>
<!-- Post Ends -->
