A Pen by Lucas Alba.

index.html

<div class='someRandomPartofyourPage'>
  <div class="ratio aspect4by3">
    <iframe src="//www.youtube.com/embed/j3vHv4lNvg4"></iframe>
    <iframe src="//www.youtube.com/embed/lBgmmuEe9HQ"></iframe>
    <iframe src="//www.youtube.com/embed/06CIpf_eSoc"></iframe>
  </div>
  <button id='ratioToggle'>Toggle Ratio</button>
  <div class='nav'>
    <button data-dir='left' data-slide-in='-100' data-slide-out='100'>Prev Video</button>
    <button data-dir='right' data-slide-in='100' data-slide-out='-100'>Next Video</button>
  </div>
</div>

script.js

$('#ratioToggle').click(function(){
   $('.ratio').toggleClass('aspect16by9').toggleClass('aspect4by3');
});
$('.nav > *').click(function(){ 
    if($('.ratio > * ').eq(0).attr('data-lock') == 'true') return;
    $('.ratio > * ').attr('data-lock','true');
    var timer = 1000;
    var swapDir = $(this).attr('data-dir');
    if(swapDir=='left'){
        $('.ratio > * ').eq(-2)
          .css('left',$(this).attr('data-slide-in')+'%')
          .animate({left: "0" }, timer)
          .siblings().eq(-1)
          .animate({ left: $(this).attr('data-slide-out')+'%' }, timer,function(){
            $('.ratio > * ').eq(-1).detach().prependTo('.ratio');
            $('.ratio > * ').attr('data-lock','false');
          });
    }
    else if(swapDir=='right'){
      $('.ratio > * ').eq(0)
        .detach()
        .appendTo('.ratio')
        .css('left',$(this).attr('data-slide-in')+'%')
        .animate({left: "0" }, timer)
        .end()
        .siblings().eq(-1)
        .animate({ left: $(this).attr('data-slide-out')+'%' }, timer,function(){
          $('.ratio > * ').attr('data-lock','false');    
        });
    }
});

Simple-Fluid-Carousel.markdown

Simple Fluid Carousel

Modified from http://jsfiddle.net/999FP/21/ after reading http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio

A Pen by Lucas Alba on CodePen.

License.

style.css

.someRandomPartofyourPage{
  width: 80%;
  margin-left:auto;
  margin-right:auto;
}
.ratio {
    display: inline-block;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.ratio::after {
    content:'';
    display: block;
}
.ratio > * {
    position: absolute; 
    width: 100%;
    height: 100%;
}
.aspect16by9::after {margin-top: 56.25%;}
.aspect4by3::after  {margin-top: 75%;}
button{ float:left;width:33.33%;}