JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div>
  <h3>
  Full screen using bootstrap container and classes
  </h3>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
  </div>

  <h3>
  Full screen without any container
  </h3>
  <iframe width="640" height="560" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>

  <h3>
  Half screen and using bootstrap container and classes
  </h3>
  <div class="half-container">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
  </div>

  <h3>
  Half screen without any container
  </h3>
  <div class="half-container">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
  </div>
</div>

CSS

iframe {
  width: 100%;
  height: auto; /*16:9*/
  border: 0;
}

.half-container {
  width: 50%;
}