Mehran Mehran - 2 months ago 8
CSS Question

How to Position "MediaElement" media player

I'm new in web development, I am using MediaElement as my media player in my website. I'm trying to position the audio player but there are too many elements that need to be positioned separately. Is there an easy, singular approach to position the whole thing at once?

Answer

There is always a parent element that surrounds just about any component in a web page, especially media players. That's the only thing that needs to be positioned; All child elements will follow.

Below I've created a running example of a fake media player. Notice only the top level .player class has positioning styles. Those are the only ones you need to set. All the child element styles would come from whatever default stylesheet comes with the media player itself.

/* only position the parent container */
.player {
  position: absolute;
  top: 100px;
  left: 100px;
}

/* IGNORE THESE, assume they're from the media player's own stylesheets */
.player .player-video {
  width: 250px;
  height: 200px;
  background: #000;
}

.player .player-controls {
  padding: 5px;
  background: #CCC;
}

.player .player-play-button,
.player .player-next-button {
  display: inline-block;
}
<div class="player">
   <video class="player-video"></video>

   <div class="player-controls">
     <button class="player-play-button">PLAY</button>
     <button class="player-next-button">NEXT</button>
   </div>
</div>

There are other ways to position elements such as margins, padding and centering, so be sure to explore all options to make sure it'll layout correctly.

Comments