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 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="" allowfullscreen></iframe>
  </div>
</div>

CSS

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

.half-container {
  width: 50%;
}

JavaScript

$('iframe').each(function() {
	var hasSource = $(this).attr('src');

  if ($(this).parent('.embed-responsive').length || !hasSource) {
    return;
  }

  $(this).wrap('<div class="embed-responsive embed-responsive-16by9"></div>');
});