JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<bebop-player-embed>
  <iframe src="http://mit.edu"></iframe>
</bebop-player-embed>

<div style="width: 200px">
  <bebop-player-embed>
    <iframe src="http://mit.edu"></iframe>
  </bebop-player-embed>
</div>

CSS

bebop-player-embed {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding-bottom: 65.71% /* 460/700 aspect ratio */
}

bebop-player-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff
}