Youtube Player

Small snippet for a responsive iframe solution with fixed aspect-ratio.

by Daniel Hall

HTML

<iframe src="http://www.youtube.com/embed/nyz04xtX22A" frameborder="0" id="my" allowfullscreen></iframe>
				        <iframe src="http://www.youtube.com/embed/cinpGFktP5w" frameborder="0" id="j" allowfullscreen></iframe>
              
        <iframe id="ifram"src="http://www.youtube.com/embed/wh1TCjyICik" frameborder="0" allowfullscreen></iframe>
                <iframe
                
  id="im="src="http://www.youtube.com/embed/NadPW1mscMY" frameborder="0" allowfullscreen>
  
  </iframe>
                 <iframe id="imm="src="http://www.youtube.com/embed/jH-Xm2OXUiQ" frameborder="0" allowfullscreen>
  
  </iframe>
	                 <iframe id="imm="src="http://www.youtube.com/embed/8cGKuy-SSh8" frameborder="0" allowfullscreen>
  
  </iframe>
		                 <iframe id="mp="src="http://www.youtube.com/embed/qxuH0Sc-T0s" frameborder="0" allowfullscreen>
  
  </iframe>

CSS

#iframe {
     position: absolute;
     width: 250%;
     height: 50%;
}
#my {
     position: absolute;
     width: 100%;
     height: 50%;
     top: 23%;
		 left: 70%;
}
#ifram {
        width: 100%;
     height: 50%;
     top:0%;
}
#imm {
     position: absolute;
       width: 100%;
     height: 50%;
     top:0%;
}
#imm {
     position: absolute;
       width: 100%;
     height: 80%;
     top: 150%;
}
body {
    background-color: black;
}
#j {
	   position: absolute;
		 left: 70%;
		 top: 70%;
		 width: 99%;
		 height: 30%;
		 src: http://www.youtube.com/embed/cinpGFktP5w;
}
#mp {
	 position: absolute;
	 left: 110%;
	 top: 0%;
	 width: 30%;
	 height: 30%;
}