Video tutorials in Dashboard

Question

I do exactly that with my clients!
PDF’s are much harder to assemble & nobody Reads The F Manual, anyway 🙂

And, if you allow me a little digression, I’d recommend this talk about e-learning and video tutorials: Salman Khan: Let’s use video to reinvent education.

Dealing with Privacy

YouTube offers two possibilities.

Private videos

If your video is set to Private, only you and up to 50 other users who
you invite to view the video will be able to see it. The video will
not appear on your channel, in search results, or in playlists etc.

You cannot share a private video with more than 50 other users.

In order to watch a private video, your contacts must already have a YouTube account.

Thumbnails for a private video will be unlisted, while the video itself will be private. The thumbnails will not appear in any of
YouTube’s public spaces (such as search results, your Channel, or the
Browse page),

Unlisted videos

An unlisted video is a different type of private video. Unlisted means
that only people who know the link to the video can view it (such as
friends or family to whom you send the link). An unlisted video will
not appear in any of YouTube’s public spaces (such as search results,
your channel, or the Browse page). An unlisted video is different to a
private video in these ways:

You don’t need a YouTube account to watch the video (you can see an
unlisted video if someone sends you the video’s link)

There’s no 50 person sharing limit

In Vimeo, with a premium account, you are able to have a video unlisted/invisible and that will only play in domains that you can set.

Recently found this plugin: Secure HTML5 Video Player, but haven’t tested yet.

Tip for recording the video

Record with the browser in fullscreen mode, without address bar, bookmarks bar, well, any bar at all.
This way, if you fill the browser window with the video, it seems that you are actually manipulating the very WordPress dashboard.

Displaying the tutorials as a Dashboard Widget

This sample code uses YouTube, that’s the normal venue where I publish the tutorials, normally unlisted, but sometimes private.

add_action('wp_dashboard_setup', 'wpse_46445_dashboard_widget');

/*
 * Builds the Custom Dashboard Widget
 *
 */
function wpse_46445_dashboard_widget()
{
    $the_widget_title="Site Tutorials";
    wp_add_dashboard_widget('dashboard_tutorials_widget', $the_widget_title, 'wpse_46445_add_widget_content');
}

/*
 * Prints the Custom Dashboard Widget content
 *
 */
function wpse_46445_add_widget_content() 
{
    $tutorial_1 = wpse_46445_make_youtube_thumb_link(
        array(
            'id'=>'s-c_urzTWYQ', 
            'color'=>'#FF6645', 
            'title' => 'Video Tutorial', 
            'button' => 'Watch now'
        )
    );

    $tutorial_2 = wpse_46445_make_youtube_thumb_link(
        array(
            'id'=>'HIq9kkHbMCA', 
            'color'=>'#FF6645', 
            'title' => 'Tutorial em Vídeo', 
            'button' => 'Ver agora'
        )
    );

    $html = <<<HTML
    <h4 style="text-align:center">How to render videos for web using YouTube horsepower</h4>
    {$tutorial_1}
    <hr />
    <h4 style="text-align:center">Como renderizar para web videos usando o poder do YouTube</h4>
    {$tutorial_2}
HTML;

    echo $html;
}

/*
 * Makes a thumbnail with YouTube official image file 
 * the video links opens the video in the "watch_popup" mode (video fills full browser window)
 * 
 */
function wpse_46445_make_youtube_thumb_link($atts, $content = null) 
{
    $img   = "http://i3.ytimg.com/vi/{$atts['id']}/default.jpg";
    $yt    = "http://www.youtube.com/watch_popup?v={$atts['id']}";
    $color = ($atts['color'] && $atts['color'] != '') ? ';color:' . $atts['color'] : '';

    $html  = <<<HTML
        <div class="poptube" style="text-align:center;margin-bottom:40px">
        <h2 class="poptube" style="text-shadow:none;padding:0px{$color}">{$atts['title']}</h2>
        <a href="https://wordpress.stackexchange.com/questions/46445/{$yt}" target="_blank"><img class="poptube" src="{$img}" style="margin-bottom:-19px"/></a><br />
        <a class="poptube button-secondary" href="https://wordpress.stackexchange.com/questions/46445/{$yt}" target="_blank">{$atts['button']}</a></div>
HTML;

    return $html;
}

Dashboard: with capital letter = wp-admin/index.php
dashboard: lowercase = WordPress backend administrative area

Dealing with Privacy

Private videos

Unlisted videos

Tip for recording the video

Displaying the tutorials as a Dashboard Widget

Related Posts: