Video tutorials in Dashboard

1 Views

I want to insert a few video tutorials in the wordpress dashboard, instead of creating a pdf manual for a client, as i think they are easier for this client, how would I go about that? I am thinking of having like 4 videos in the dashboard. Where would be the best place to host them as well, in order to keep them private?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. 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="{$yt}" target="_blank"><img class="poptube" src="{$img}" style="margin-bottom:-19px"/></a><br />
        <a class="poptube button-secondary" href="{$yt}" target="_blank">{$atts['button']}</a></div>
HTML;

    return $html;
}

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