В прошлом уроке мы разобрали, как подогнать встраиваемый плеер с видео на сайт. Сегодня мы рассмотрим как подогнать <iframe> с Youtube или других аналогичных сайтов. Принцип тот же, вставляем скрипт перед закрытием тега body и iframe примет нужный нам размер. Единственный нюанс - замените content на свой тег в котором будет <iframe> с видео.

<script type="text/javascript">
// By Chris Coyier & tweaked by Mathias Bynens

$(function() {

        // Find all YouTube videos
        var $allVideos = $("iframe[src^='http://www.youtube.com']"),

            // The element that is fluid width
            $fluidEl = $("#content-area");

        // Figure out and save aspect ratio for each video
        $allVideos.each(function() {

                $(this)
                        .data('aspectRatio', this.height / this.width)

                        // and remove the hard coded width/height
                        .removeAttr('height')
                        .removeAttr('width');

        });

        // When the window is resized
        // (You'll probably want to debounce this)
        $(window).resize(function() {

                var newWidth = $fluidEl.width();

                // Resize all videos according to their own aspect ratio
                $allVideos.each(function() {

                        var $el = $(this);
                        $el
                                .width(newWidth)
                                .height(newWidth * $el.data('aspectRatio'));

                });

        // Kick off one resize to fix all videos on page load
        }).resize();

});</script>

<iframe width="1280" height="750" src="http://www.youtube.com/embed/fXm9EwzSjO4?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>