Small video player

Small video player in an iframe looks small and the UI overlaps.

by David Iglesias

HTML

<!-- try with "small" or "large" container -->
<div class="small container">
  <iframe src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4">
  </iframe>
</div>

CSS

.container {
  border: 1px solid black;
  border-radius: 10px;
  margin: 0 auto;
  overflow: hidden;
}

.small {
  width: 400px;
  height: 90px;
}

.large {
  width: 400px;
  height: 640px;
}

iframe {
  border: none;
  width: 100%;
  height: 100%;
}