Responsive HTML5 Youtube Video Embed

<style>
body {
	font-family: Geneva, Arial;
    font-size: 12px;
    padding: .5em;
}
.btn {
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
	cursor: pointer;
    display: inline-block;
    margin-bottom: 1em;
    padding: 5px;
}
.btn:hover {
	color: #fff;
	background: #333;
	border: 1px solid #000;
}
section {
	padding: 1em 0;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>
<script>
$("#clickS").click(function(){
  $(".videoWrapper").animate({
    width: "50%",
    height: "50%"
  }, 1000 );
  $(".videoWrapper iframe").animate({
    height: "50%"
  }, 1000 );
});

$("#clickL").click(function(){
  $(".videoWrapper").animate({
    width: "100%",
    height: "0"
  }, 1000 );
  $(".videoWrapper iframe").animate({
    height: "100%"
  }, 1000 );
});
</script>
<section>
    <span class="btn" id="clickS">small</span>
    <span class="btn" id="clickL">large</span>
    <div class="videoWrapper">
        <iframe width="800" height="450"  src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>
    </div>
</section>

или вот так:

<style>
.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video iframe, .video object, .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="video">
	<iframe 
    	width="420" height="315" 
    	src="http://www.youtube.com/embed/UNbJzCFgjnU" 
    	frameborder="0" 
    	allowfullscreen="">
</iframe>
</div>

найдено тут: https://snipt.net/public/tag/youtube/