body {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1152px) {
  .mainContainer {
    display: block;
    width: 400px;
    text-align: left;
  }
}

.video-container {
  position: relative;
  margin-top: 8px;
}

.video-container:before {
  display: block;
  content: "";
  width: 100%;
  padding-bottom: 56.25%;
}

.video-container > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.video-container video {
  width: 100%;
  height: 100%;
}

.centeredVideo {
  display: block;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}

.allcontrols {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.controls {
  display: block;
  width: 100%;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  margin-bottom: 10px;
}