HTML5 Player
  • HI Neil & Mick
    Im sure that this is simple, but I cant work it out
    Ive got the player to work, fine, but the actual video image is much smaller than the player itself
    and so has a large black border around it?
    Videos are made in Movie Maker 6
    How do I change this so that the video is more or less the size of the player?

  • Maybe the output of the video from your software is creating what they call the letterbox format and would be tied to a certain aspect ratio but I'm not too well up on video stuff to be honest and the only thing I could suggest would be to oversize the video output, try an aspect ratio of 16:9 which should then fit into a smaller resized player window without the borders.

    Neil may have a better suggestion and I would imagine be about sometime tomorrow (Wednesday)

    Sorry I can't help much than this at present

    EDITED: This link may help you further Peter -!topic/youtube/4OFWK8xm8og - click on the "epontius said" link to expand his explanation for black borders ;-)
  • Hi Mick
    Thanks for that, sort of works.
    I don't really know where you put the code exactly, or doesn't that really matter where in the existing code it goes.
    A thought how about changing the colour of the border to my page colour, but I can't see any code to change, doesn't seem to be any colour code in the snippet.
    Where would that code be?

  • Hi Peter,

    The code given in epontius's google forum reply would only work if added to a youtube video link and wouldn't work by trying to add the code to the video player addon itself.

    The only other thing you could try to do with regards to code/css edits for the player and colour changes, is to publish to disk and then explore the video-player-style.css file.

    I did an experiment here by looking at that css file and took some code out of it and added it to the HTML frag code of the player just to change the back ground colour of the player from black to red, the code added then looks like this

    <script type="text/javascript">
    $(document).ready(function() {
    projekktor('#player1', {
    volume: 0.7,
    loop: false,
    autoplay: false,
    playerFlashMP4: 'jarisplayer.swf'
    .ppdisplay {
    background-color: #ff0000;}

    Notice the extra code added to the original code and sits in between the opening and closing tags of STYLE

    I'm not sure if this would work or not because I'd say the black borders are created by your video editing software so wont be changed via css code added to the player. As previously mentioned, I think your problem is down to aspect ratio settings when you create the video output.

    Not sure I can give you much more advice than this but hope it helps a little more.
  • Thanks for this Mick
    I think you're right the initial aspect ratio is important!
    I'll have an investigation.
  • ;-)

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion