JSFiddle - React, Tailwind, and code Playground

by Ajsa Ferguson

HTML

<div id="wave1">
  
    <img src="http://www.richardclifford.net/wp-content/uploads/2015/05/wave1.jpg" alt="wave 1">
  </div><!--wave1-->
<div class="outer">
 <div class="video_container"> 
  <div class='embed-container'><iframe src='https://www.youtube.com/embed/YpW4V8GKw_I' frameborder='0' allowfullscreen></iframe>
 </div><!--embed container-->
  </div>
 <!--video_container--></div><!--outer-->

CSS

#wave1 {
	background-color:#C31619;
	width: 100%;
	height: inherit;
	padding: 0;
	margin: 0;
    font-size: 0;
}
#wave1 * {
    font-size: 1rem;
}
#wave1 img {
	 width: 100%;	
}
.embed-container { 
	margin-left:auto;
	margin-right:auto;
	position: relative; 
	padding-bottom: 56.25%;
	height: auto; 
	overflow: hidden;
	max-width: 80%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   height: 100%;
   width: 100%;
   border: 0;
} 
.video_container {
	width: 60%;
	height: auto;
	margin-right: auto;
	margin-left: auto;	
	}
.outer {
    padding-top: 1%;
	background-color: #28A9E1;
	padding-top: 1%;
	padding-bottom: 1%;
}