CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
knox-flaneur
knox-flaneur

Reputation: 149

Positioning a play button and a video background section in bootstrap

I have the following bootstrap code:

<section>
  <div class="container-fluid">
    <div class="row">
      <video>
        ...source...
      </video>
      <button>Play</button>
    </div>
  </div>
</section>

The section has a height set to 560px. The video tag has a height: auto and a width: 100%. How can I add a Play Pause button that stays consistently in the same spot of the viewable video area no matter the screen size?

Upvotes: 1

Views: 2312

Answers (2)

zer00ne
zer00ne

Reputation: 43910

  • Use relative units of measurements like % and em
  • Use a font icon inserted as a pseudoclass with ::before or ::after
  • Add position:relative to .row and position:absolute to #play in order to accurately position #play.
  • Add bottom or top of #play at this value: calc(50% - height of #play/2). Note: some font icons are not perfectly centered vertically so use that formula and adjust accordingly.
  • Add left or right of #play at this value: calc(50% - width of #play/2).
  • Add z-index:-1 to .row and z-index:1 to #play

Demo

.row {
  display: table-cell;
  position: relative;
  z-index: -1
}

#play {
  display: block;
  position: absolute;
  z-index: 1;
  /* 50% - (height/2) [Using a font icon, adjust accordingliy] */
  bottom: calc(50% - 5em);
  /* 50% -(width/2) */
  left: calc(50% - 4em)
}

#play.idle::before {
  content: '\2bc8';
  width: 8em;
  /* AR 16:9 is width * .5625 */
  height: 4.5em;
  color: cyan;
  font-size: 8em
}
<section height='560'>
  <div class="container-fluid">
    <div class="row">
      <video id='vid' src='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' width='100%' height='auto'></video>
      <div id='play' class='idle'></div>
    </div>
  </div>
</section>

Upvotes: 1

Quentin Benyahia
Quentin Benyahia

Reputation: 101

You can set the position of your button at "absolute", then position it with Top, bottom, left, right.

Btw the absolute position gonna be set relatively to the nearest positioned ancestor of your Play/Pause button so if your viewable video area is set to relative it's always gonna be in the same spot relatively to your video area.

Upvotes: 0

Related Questions