Отзывчивый Vimeo в FancyBox-2 - как изменить размер видео, когда FancyBox изменяет размер

Я не могу получить Vimeo встроенный IFrame для изменения размера правильно при изменении размера окна, используя FancyBox (http://fancyapps.com/fancybox/)Отзывчивый Vimeo в FancyBox-2 - как изменить размер видео, когда 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-код в пример выше, - это имитирует ту же среду.

Спасибо.

источник

2013-12-04 Sam

Почему вы не просто использовать FancyBox помощник СМИ? http://fancyapps.com/fancybox/#examples Пример vimeo (медиа-помощник) полностью реагирует без дальнейших осложнений. – JFK

Чтобы использовать вспомогательный помощник fancybox, мне нужно будет установить ссылку на vimeo.com/[video_id], что было бы показано A. ссылка на публикацию и B. открыть страницу Vimeo, если JS не включен.Ничего из того, что я хотел бы сделать. Видео должно быть встроено в мой сайт, так как есть определенное количество контроля доступа к видео - они не доступны. – Sam

Однако вы обнаруживаете идентификатор видео в переменной 'htmlcontent'. – 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/

источник

2013-12-06 10:23:54 Sam

хорошо, это не отвечает на ваш оригинальный вопрос, который был «как изменить размер видео при изменении размера fancybox» – JFK

ответ отвечает всем требованиям, изложенным в исходном вопросе. Вы должны прочитать весь вопрос, чтобы дать полный ответ. – Sam

Если вы уже оборачивать видео внутри 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

источник

2013-12-05 17:28:20 JFK

Отзывчивый Vimeo в FancyBox-2 - как изменить размер видео, когда FancyBox изменяет размер

ответ

Смежные вопросы