WordPress.org

Forums

Video.js - HTML5 Video Player for WordPress
[resolved] [Plugin: VideoJS - HTML5 Video Player for WordPress] videojs shortcode- poster frame smaller than vi (9 posts)

  1. CharlieCanfield
    Member
    Posted 2 years ago #

    i'm new to all this and learning wp, html5, videojs, etc via lots of lynda.com tutorials and wp.org reading, for my blog/animation archive.

    i'm new to coding too, so i'm seeing if i can get by with just this short code from the wp/videojs page (no webm or ogg versions):

    [video mp4="http://charliecanfield.com/wp/wp-content/uploads/2012/09/xoom1_fnl.mp4" poster="http://charliecanfield.com/wp/wp-content/uploads/2012/09/xoom1_fnl_poster.1.jpg" preload="auto" autoplay="false" width="640" height="360" id="movie-id" class="alignleft" controls="false"][/video]

    i'm building the blog via safari, and checking firefox and chrome, and i notice the poster frames i generate from the videos (copying and pasting from quicktime to png or jpg) are smaller than the video underneath by maybe 10%.

    anyone have a clue?

    here's a link to the blog page i'm currently testing:
    http://charliecanfield.com/wp/xoom-2/

    also noticing the second of 2 videos isn't showing in firefox, but the 1st is fine, so any clues about that would also be appreciated...

    if this has any bearing- the only other thing code-wise i've done based on the tutorials is to drop this code into the wp .htaccess file (even tho' i probably won't use the webm and ogg):

    AddType video/mp4 mp4 m4v
    AddType audio/mp4 m4a
    AddType video/ogg ogv
    AddType audio/ogg ogg oga
    AddType video/webm webm

    thnx,
    cc

    http://wordpress.org/extend/plugins/videojs-html5-video-player-for-wordpress/

  2. Dustin Lammiman
    Member
    Plugin Author

    Posted 2 years ago #

    Do the poster images work better if you resize them to the size of the player before uploading them to WordPress? (e.g. the first video player is 640x360 but the poster is 1280x720, try resizing it to 640x360).

    Not sure why the second video shouldn't show up in Firefox. If it is working in other browsers then I don't think it is an issue with your .htaccess. I may do a bit more digging and respond a little later.

  3. Dustin Lammiman
    Member
    Plugin Author

    Posted 2 years ago #

    Try giving the second video a different id and see if that solves the Firefox issue.

  4. CharlieCanfield
    Member
    Posted 2 years ago #

    thanks for the feedback-
    i tried sizing a new poster frame and still behaves 10% smaller (which i suspected, as some of the vids i'm posting i'm not resizing in the code and the poster frames are still appearing smaller).

    as to the

    [video id="movie-id"]
    code- i have to admit i just plugged it in as-is not knowing how to customize it; i looked online but don't see info on how to intentionally use it... does the "movie-id" part get replaced with a file name? or...

    thnx again,
    c

  5. Dustin Lammiman
    Member
    Plugin Author

    Posted 2 years ago #

    The id can be whatever you want, but it should be unique for each video. It might make sense to make the first video id="movie-id-1", the second id="movie-id-2", etc. if you aren't sure what to name them. Actually, if you just leave off the id="" part altogether the plugin will auto-generate a random id.

  6. Dustin Lammiman
    Member
    Plugin Author

    Posted 2 years ago #

    The problem with your poster images is caused by a piece of CSS that looks like this:

    .entry-content img,
    .comment-content img,
    .widget img {
    	max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
    }

    I'm not sure if you know much about CSS, but adding a style to the end of your style.css like this should fix it:

    img.vjs-poster {
    	max-width: 100%;
    }
  7. CharlieCanfield
    Member
    Posted 2 years ago #

    cool-
    i found the style.css in the themes/2011 folder- i can just tack your 'fix-it' code at the very end, after everything else, yes? (do wp updates overwrite things like that?)

    and i'm happy to either, as you suggest, excise the whole line[video id="movie-id"] entirely, or if a specific name is better, and it doesn't need to be tricky code, i can simply enter a name that relates to the file instead of "movie-id". (you advise one over another?)

    much thanks,
    c

  8. Dustin Lammiman
    Member
    Plugin Author

    Posted 2 years ago #

    Yup, you should be able to just tack that on to the end of style.css. WordPress updates won't break it. A 2011 theme update might though, so watch out for that. Not sure how often it updates.

    As far as the id goes any of the methods you mentioned should work equally well. For the sake of simplicity you may just want to omit the id.

  9. CharlieCanfield
    Member
    Posted 2 years ago #

    right on, dude-

    those two suggestions are working!

    many thanks,
    cc

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic