Отзывчивый vimeo в fancybox-2 - как изменить размер видео при изменении размера fancybox

Я не могу заставить встроенный iframe vimeo правильно изменять размер при изменении размера окна с помощью fancybox (http://fancyapps.com/fancybox/)

При уменьшении размера окна Fancybox отлично меняет размер, как и встроенное видео (с использованием кода ниже).

Однако, увеличьте размер окна, и fancybox останется таким же, как и видео.

См. Здесь: http://jsfiddle.net/prng9/1/ - затем уменьшите размер кадра результата резервное копирование (уменьшение размера тоже не идеально, если честно - если у кого-то есть способы получше, дайте мне знать - код основан на следующем: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php)

Это модный код коробки, который я использую:

jQuery(document).ready(function($) {
    var htmlcontent = "<html><body><div class='vimeo_embed'><iframe class='vimeo' src='//player.vimeo.com/video/47438073' width='500' height='281' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></body></html>";

  jQuery.fancybox.open(
    {
        content: htmlcontent,
        type:'ajax',
        padding : 0,
        afterShow: function(current,previous) {
            var vid = jQuery('iframe.vimeo');
            var ht = vid.height();
            var wd = vid.width();
            vid.attr('data-aspectRatio', ht / wd)
                .width(wd)
                .height(ht)
                .removeAttr('width')
                .removeAttr('height');
            },
        onUpdate: function() {
            //should run when size or orientation is changed
            var vid = jQuery('iframe.vimeo');                               
            var newWidth = jQuery('.vimeo_embed').width();
            vid.width(newWidth).height(newWidth * vid.attr('data-aspectRatio'));
    }
  });  
});

Примечание: я знаю, что fancybox позволяет изменять размер vimeo при прямой ссылке на видео - например, я мог бы использовать http://player.vimeo.com/video/47438073 в качестве href вместе с медиа-помощником, и все будет хорошо. Однако у меня есть определенное количество элементов управления доступом и отслеживания просмотров видео, поэтому я использую видео, встроенные на другие страницы. Следовательно, причина, по которой я включил html-код в пример выше, - это имитирует ту же среду.

Спасибо.


jquery vimeo fancybox fancybox-2
person Sam    schedule 04.12.2013    source источник
comment
Почему вы просто не используете помощник fancybox media? fancyapps.com/fancybox/#examples Пример vimeo (помощник по мультимедиа) полностью отвечает без дополнительных сложностей   -  person JFK    schedule 05.12.2013
comment
Чтобы использовать помощник fancybox media, мне нужно было бы создать ссылку на vimeo.com/[video_id], что бы A. открыло ссылку для всех, а B. открыло бы страницу vimeo, если JS не включен. Ничего из этого я не хотел бы делать. Видео должно быть встроено на мой сайт, поскольку есть определенный контроль доступа к видео - они не доступны в свободном доступе.   -  person Sam    schedule 05.12.2013
comment
Однако вы выставляете идентификатор видео в переменной htmlcontent.   -  person JFK    schedule 05.12.2013
comment
Я знаю, это просто слабый контроль доступа - он не предназначен для защиты от дурака, так как это не критично :)   -  person Sam    schedule 05.12.2013

Ответы (2)


arrow_upward
0
arrow_downward

Если вы уже помещали видео в iframe, просто позвольте fancybox выполнить эту работу вместо этого, чтобы вы могли сделать это:

var htmlcontent = "//player.vimeo.com/video/47438073";
$.fancybox.open({
    href: htmlcontent,
    padding: 0,
    type: 'iframe',
    width: 640, // or whatever
    height: 360,
    aspectRatio: true, // <== this keep your vimeo aspect ratio after resize
    scrolling: 'no'
});

См. JSFIDDLE

person JFK    schedule 05.12.2013

arrow_upward
0
arrow_downward

Ответ JFK заставил меня задуматься по-другому, и я нашел способ - установить ссылку на встроенное видео на сайте в href <a> и добавить значение данных в этот элемент со ссылкой на проигрыватель vimeo:

<a href="/link_on_site_to_embedded_video" data-href="//player.vimeo.com/video/47438073">Open fancybox</a>

JS:

$('a').fancybox({
    padding: 0,
    type: 'iframe',
    width: 640,
    height: 360,
    aspectRatio: true,
    scrolling: 'no',
    beforeLoad: function() {
        var url= $(this.element).data("href");
        this.href = url
    }
});

Если у пользователя не включен Javascript, он попадает на страницу встроенного видео.

Если у них включен Javascript, контент обновляется перед загрузкой для отображения видео vimeo - и они «увидят» встроенную ссылку на видео (например, если щелкнуть правой кнопкой мыши> скопировать адрес ссылки или открыть в новой вкладке).

Это именно то поведение, которое мне нужно.

Конечно, как указывает JFK, это не является надежным - они все еще могут видеть ссылку vimeo в коде, но если кто-то желает изучить код, они приветствуются.

См. Здесь http://jsfiddle.net/BHfv8/.

person Sam    schedule 06.12.2013
comment
ну, это не ответ на ваш первоначальный вопрос, который был how to resize video when fancybox resizes - person JFK; 06.12.2013
comment
Этот ответ соответствует всем требованиям, изложенным в исходном вопросе. Вы должны прочитать весь вопрос, чтобы дать полный ответ. - person Sam; 06.12.2013