.player-container {
  @include media-player;
  margin: 0;

  .video {
    clear: both;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;

    .caption {
      position: absolute;
      bottom: 0;
      z-index: 30;
      background: $color-black;
      color: $color-white;
      margin: 10px;
    }

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .control-bar {
    .player-controls {
      .play {
        background-image: image-url("player-icon-play.png");
      }

      .pause {
        background-image: image-url("player-icon-pause.png");
      }

      .rewind {
        background-image: image-url("player-icon-rewind.png");
      }

      .forward {
        background-image: image-url("player-icon-forward.png");
      }

      .captions {
        display: none;

        @include media(tablet) {
          display: block;
          position: absolute;
          bottom: 0;
          left: 120px;
          height: 40px;
          width: 60px;
          padding-top: 1px;
          font-size: 14px;
          line-height: 40px;
          text-align: center;
        }
      }
    }
  }
}

// see _govuk-elements.scss for explanation
$path: false;

.player-container {
  @include media-player;
  margin: 0;

  .video {
    clear: both;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;

    .caption {
      position: absolute;
      bottom: 0;
      z-index: 30;
      background: $color-black;
      color: $color-white;
      margin: 10px;
    }

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  .control-bar {
    .player-controls {
      .captions {
        display: none;

        @include media(tablet) {
          display: block;
          position: absolute;
          bottom: 0;
          left: 120px;
          height: 40px;
          width: 60px;
          padding-top: 1px;
          font-size: 14px;
          line-height: 40px;
          text-align: center;
        }
      }
    }
  }
}

Use correct asset paths for media player
Use correct asset paths for media player

Varible scoping within the `media-player` mixin caused a similar problem to
what was solved with this commit:

https://github.com/guidance-guarantee-programme/pension_guidance/commit/dea46e6195ddfd8e2fb637c4044af536426690cd

This change solves the 404 on the volume icon and removes the need to redefine
the images for the other controls
