WordPress.org

Ready to get started?Download WordPress

Forums

Featured Video Plus
How to add a youtube play button (png image) on the generated thumbnail? (11 posts)

  1. UrbanJenny
    Member
    Posted 8 months ago #

    Hi,

    First, the plugin is great. Works as described. Kudos to the developer.

    I'm currently adding a PNG image of youtube play button (red play button we see before playing a YT video) on every thumbnail manually. This is very tedious.

    I was wondering if I can do the following:
    1. Upload the youtube image (PNG) to WordPress. (I can do that)
    2. Edit this plugin and use PHP magic to superimpose the Youtube play button right in the middle of the thumbnail. (something like this : http://halgatewood.com/youtube/) and then generate a thumbnail that has the play button on it.

    Can someone please guide how to achieve this. In which files do we need to make changes?

    http://wordpress.org/plugins/featured-video-plus/

  2. hanscz
    Member
    Posted 7 months ago #

    Am currently researching how to do this. To my mind, there would be two ways to go about this:

    1. As you said, generate an image with a play button in it
    2. Overlay a play button image using CSS. Here's a suggestion of how to do it: http://stackoverflow.com/a/5123612/173679

    Either way it will require tweaking the plugin.

    Will report my findings. Stay tuned

  3. hanscz
    Member
    Posted 7 months ago #

    Create a new directory in the plugin directory for featured video plus. The path to the new directory is

    featured_video_plus/img

    This is where you should put your play button image

    Add the following css to featured_video_plus/css/frontend.css:

    .fvp_overlay {
      position: relative;
    }
    .fvp_overlay .yt-button {
       position: absolute;
       display: block;
       height: 42px;
       width: 59px;
       top: -52px;
       left: 10px;
    }

    Change line 95 in featured_video_plus/php/frontend.php:

    from

    return '<a href="#fvp_'.$post_id.'" class="fvp_overlay" onclick="return false;">'.$html.'</a><div id="fvp_'.$post_id.'" style="display: none;"></div>';

    to

    return '<a href="#fvp_'.$post_id.'" class="fvp_overlay" onclick="return false;">'.$html.'<img class="yt-button" src="' . FVP_URL . 'img/playbutton.png"></img></a><div id="fvp_'.$post_id.'" style="display: none;"></div>';

    Note that this change references an image in featured_video_plus/img/playbutton.png

    Change code as needed.

  4. hanscz
    Member
    Posted 7 months ago #

    Create a new directory in the plugin directory for featured video plus. The path to the new directory is

    [featured video plus root directory]/img

    This is where you should put your play button image

    Add the following css to featured_video_plus/css/frontend.css:

    .fvp_overlay {
      position: relative;;
    }
    .fvp_overlay .fvp_play_button {
       position: absolute;
       display: block;
       height: 42px;
       width: 59px;
       top: -52px;
       left: 10px;
    }

    Change line 95 in featured_video_plus/php/frontend.php:

    from

    return '<a href="#fvp_'.$post_id.'" class="fvp_overlay" onclick="return false;">'.$html.'</a><div id="fvp_'.$post_id.'" style="display: none;"></div>';

    to

    return '<a href="#fvp_'.$post_id.'" class="fvp_overlay" onclick="return false;">'.$html.'<img class="fvp_play_button" src="' . FVP_URL . 'img/playbutton.png"></img></a><div id="fvp_'.$post_id.'" style="display: none;"></div>';

    Note that this change references an image in featured_video_plus/img/playbutton.png

    Change code as needed.

  5. hanscz
    Member
    Posted 7 months ago #

    please disregard This post - don't know how it got duplicated...sorry :)

    There seems to be no way to delete it.

  6. hanscz
    Member
    Posted 7 months ago #

    The page using my code example can be seen here.

  7. Alexander Hoereth
    Member
    Plugin Author

    Posted 7 months ago #

    As stated in some other topic in this forum this is planned for the future. Thanks for investigating ;)

  8. sikhalsa
    Member
    Posted 7 months ago #

    did not work for me brother.

  9. pljvp
    Member
    Posted 5 months ago #

    Works perfect!

    ... although I replaced the button source in a direct link: src="http://<yourdomain>/wp-content/plugins/featured-video-plus/img/play_button4.png" (instead of src="' . FVP_URL . 'img/playbutton.png")

    ... and don forget to check settings for overlay "Open video overlay when featured image is clicked. Define width below!" (when editing line 95 of frontend.php) at dashboard -> settings -> media -> featured videos -> usage

  10. NikolajR
    Member
    Posted 3 months ago #

    Did not work for me. The play button is displayed below the thumbnail, and the thumbnail is very big?

    Screenshot:
    http://i.gyazo.com/3bd5960f2e1c4884009b6f8281075d02.png

  11. evilmc
    Member
    Posted 2 months ago #

    @NikolajR,

    Change CSS! :-)

Reply

You must log in to post.

About this Plugin

About this Topic