<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/