MediaElement.js - HTML5 Video & Audio Player
[resolved] video and poster image offset position (6 posts)

  1. Win7Mac
    Posted 4 years ago #

    Just installed MediaElement.js and didn't find anything on this topic:
    My poster images all are in an offset position from the player. This results in a "ghostery appearence" of the image (double display).
    Better have a look for yourself:

    How can I get them on the same position?
    Why are they actually offset?

    PS: Used "Degradable HTML5 audio and video" before and this did not occur...


  2. smile-a-byte
    Posted 4 years ago #

    well I just have taken a quick look on your css ...
    and it seems that the following code from your "style.css"
    is responsible for the offset positioning:

    .art-article img, img.art-article
      margin: 15px;

    but changing that code will most likely effect other images on article-/posts aswell ... so you have to add the following:

    .mejs-poster img {
      margin: 0px;


  3. Win7Mac
    Posted 4 years ago #

    Thank you so much smile-a-byte. That did the trick.
    I just added it to the end of the "style.css", hope that's right.
    Works great now, thanks again!

  4. smile-a-byte
    Posted 4 years ago #

    Yes "style.css" is the right place.
    You're welcome. (bitteschön) ;)

  5. Win7Mac
    Posted 4 years ago #

    Is it really ok to drop any such code anywhere in the "style.css"?
    I as well may have put it also at the beginning of the css?
    Thanks again for your superfast response!

  6. smile-a-byte
    Posted 4 years ago #

    Yeah ... the "style.css" handels all styling globally. So you can refer and make your changes to any specific plugin in your "style.css" by entering the right css-code.

    But be aware that if you're updating your theme your changes get lost
    unless you're using a child theme and /or backup your files.

    Regarding the position of dropping code in your css file:
    - you should drop such snippets at the end of the file.
    - the basic layout is in the right order of your page elements.

    To get a better overview for yourself you can do it like this
    for example:

    /* My Plugin Customizations */
    .mejs-poster img {
      margin: 0px;

    Between /* and */ you can write whatever you like - some short description.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • MediaElement.js - HTML5 Video & Audio Player
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic