How to display a custom cover embedding a youtube video and when stopped display the cover again

I need to display a custom image cover in front of an embedded Youtube video.

After the video has stopped, I need to display again the clickable cover.

For a better graphical result I’ve added an over image for the cover and a fadein to the cover when the video ends. To do this I’ve used the Youtube iframe API.

This code is for jQuery 1.4.4. If you have a newer version of jQuery and live() is not working change live() to on().

Here the html:

<a id="idcover" href="#" 
style="display: block; width: 100%;">
<img src="/path/to/cover/off.jpg" alt="Video"></a>

Here the js:

// include youtube API
$.getScript("http://www.youtube.com/player_api");
var myselector = "#idcover";
// preload image displayed on over to avoid glitches: 900 with, 500 height
overimg = new Image(900,500);
overimg.src = '/path/to/cover/on/hover.jpg';
var offimg_src = overimg.src;
$(myselector).live('mouseover', function (e) {
offimg_src = $(this).find('img:first').attr('src');
$(this).find('img:first').attr('src', overimg.src);
});
$(myselector).live('mouseout', function (e) {
$(this).find('img:first').attr('src', offimg_src);
});
$(myselector).live('click', function (e) {
e.preventDefault();
// add video player container
var playerid = 'yourplayercontainerid';
$(myselector).after('&lt;div style="display: none;" id="' + playerid + '"&gt;&lt;/div&gt;');
// I suppose the framework is loaded before the click, so this is not strictly necessary
// function onYouTubeIframeAPIReady() {
window.player = new YT.Player(playerid, {
width: '100%',
height: 720,
videoId: '7W2vjTgzucA', // your youtube code here
playerVars: { 'autoplay': 1, 'controls': 1, 'rel': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
// 'onError': onPlayerError
}
});
// }
function onPlayerReady(event) {
// hide cover
$(myselector).hide();
// view the player
$('#'+playerid).show();
}

function onPlayerStateChange(e) {
// se stopped (raggiunto il fondo), rimette il tappo e distrugge il video player
if (e.data == 0) {
$(myselector).fadeIn(500);
// destroy iframe player
window.player.destroy();
// destroy player container
$('#'+playerid).remove();
// now the cover is ready to another click, and all 
// this process will restart on user click on cover
}
}

Character substitution on Jquery

Here an easy way to search and replace each occurrence a group of characters (in this case underscore and minus) with another (in this case a space) on a specified element (in this case each A), using Jquery javascript library.

$("a").each(function() {
   $(this).html($(this).html().replace(/[_-]/g," "));
});

The first argument passed on replace is a regex, if you just pass a single character (like “_” or “-“) only first occurrence for each element.

Real world usage: I use this onto a long page, where a table has long filenames with underscore and minus in place of spaces. This trick allows in my case to show tables nicely, without caring on a mass substitution via server side scripting.

See also:

Add to Bookmark / Favorites on Drupal

Tested on:

  • Drupal 5.x
  • Zen theme

On your page.tpl.php, change default node links rendering with this:

<?php if ($links): ?>
<div class=”links”>
<?php
# add to favorites / bookmarks link
$node->links[‘add2fav’] = Array(
‘title’=>trim(t(“Add to favorites”)),
‘href’=>$_GET[‘q’],
‘attributes’=>Array(
‘class’=>”add2fav”,
‘onclick’=>’bookmark()’,
)
);
# intercept and theme node links
print theme_links($node->links);
print ‘<script type=”text/javascript”>// <![CDATA[
function bookmark(){
var url = window.document.location;
var title = window.document.title;
if ((navigator.appName == “Microsoft Internet Explorer”) && (parseInt(navigator.appVersion) >= 4)) {
window.external.AddFavorite(url,title);
} else if (navigator.appName == “Netscape”) {
window.sidebar.addPanel(title,url,””);
} else {
alert(“Press CTRL-D (Netscape) or CTRL-T (Opera) to bookmark”);
}
}
// ]]></script>’;
?>
</div>
<?php endif; ?>

Now any node has your “Add to favorites” link, try to click it.

If you wrap alert message in a t() function, you can also translate displayed message.

See also:

Make JCarousel and Contemplate work together

Drupal modules needed:

* = tested on latest official release
Howto subject: How to use JCarousel within a Contemplate modified node body

JCarousel is a nice JQuery plugin to render a vertical or horizontal bar containing some custom HTML code elements. Every element is within a list item of an unordered list. On page load a JQuery event trigger the simple unordered list to show as a bar.

Let’s start

To use Contemplate more smoothly (and without cut/paste from your preferred code editor, i.e. Quanta), you can create a file-based contemplate instead a database based.

  1. Create a sites/all/contemplates folder (or sites/mysitename/contemplates)
  2. According to Contemplate help (admin/help/contemplate), put there your node-mynodetype-body.tpl.php file, where “mynodetype” is the machine name of the type you want to modify (that one that appears like node/add/mynodetype when you create a new node of that type).
  3. Visit admin/content/templates to update the contemplate list. Now, if you go to admin/content/templates/mynodetype you can read:

    This template is being read fromsites/all/contemplates/node-mynodetype-body.tpl.php
    Please make changes to this file or remove it to continue editing here.

This is your contemplate file for this how-to. You’ve only to modify it, upload it and watch your mynodetype body growing up with JCarousel.

Call JCarousel

On the top of your content template, write:

if(module_exists(“jcarousel”)){
jcarousel_add(“tango”);
$js = “// <![CDATA[
#function to add a Bouncing Effect on your JCarousel: you can add another custom effect function
// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
jQuery.easing[‘BounceEaseOut’] = function(p, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
};

# Call JCarousel when page is ready for the element mycarousel
# Read http://sorgalla.com/projects/jcarousel/#Configuration
jQuery(document).ready(function() {
jQuery(‘#mycarousel’).jcarousel({
vertical: false,
animation: 3000,
easing: ‘BounceEaseOut’,
visible: 5,
scroll: 4
});
});
// ]]>”;

#add to HTML page HEAD this JavaScript code
drupal_add_js($js, ‘inline’, ‘header’);
}
?>

Styling

Using latest official release of JCarousel, tango theme skin.css file returns a buggy appearance. You can switch to the original tango skin.css file on sorgalla.com. Simply copy that file to your module skin folder.
In order to make your JCarousel works better, you have to write some additional CSS lines on your theme CSS file:

/* JCarousel custom CSS for horizontal bars */
/* DO NOT USE margin or padding for item elements
(auto-adjusted with visible/scroll JCarousel options) */
.jcarousel-item-horizontal{
width: 100px;
}
/* Bar total width for 5 elements
(100×5)px + 10px horizontal padding */
.jcarousel-container-horizontal,
.jcarousel-clip-horizontal{
width: 550px;
}

/* center jcarousel within a block element */
..jcarousel-container-horizontal{
margin: auto;
}

/* item height = bar height */
.char .jcarousel-item-horizontal,
.char .jcarousel-clip-horizontal{
height: 150px;
}

Contemplate JCarousel

A simple but useful way to test JCarousel is to display attached image files on your mynodetype. Assuming that all attached files are image files, that you want tango theme and you want to render an imagecache picture with preset named “my_thumbnail_preset”, add to your contemplate file these lines:

<?php
/* UPLOADED FILE CAROUSEL */
$attached_files_carousel = TRUE;

if($attached_files_carousel): ?>
<ul id=”mycarousel” class=”jcarousel-skin-tango”>
<?php
$preview_imagecache_preset = ‘character_picture’;
if(!empty($node->files)){
foreach($node->files as $uploaded_file){
/* if imagecache is present, build the thumbnail */
if(module_exists(‘imagecache’))
$uploaded_file_preview = theme(‘imagecache’,$preview_imagecache_preset,$uploaded_file->filepath);
else
$uploaded_file_preview = l($uploaded_file->filename,$uploaded_file->filepath);
/* Print the List Item */
print “<li>” . ‘<a title=”‘.$uploaded_file->filename.'” rel=”lightbox” href=”‘. base_path() . $uploaded_file->filepath . ‘”>’. $uploaded_file_preview . ‘</a>’ . “</li>”;
}
}
?>
</ul>
<?php # END CAROUSEL
endif; ?>

Fantastic Attachments

This method simply write the UL#mycarousel via PHP (static JCarousel method). Using rel=”lightbox” enable image file zoom via JavaScript, if lightbox v2 module is enabled. If you want to implement complex AJAX loading or to experiment more JCarousel effects, options and customizations, see also:

Another example, using some CSS and photoframe module: