Автоиграет встроенное видео Youtube с Fancybox - PullRequest
5 голосов
/ 01 марта 2011

У меня на странице есть связанное изображение, которое при нажатии загружает модальное поле Fancybox .Это делает это успешно, но я хочу, чтобы видео autoplay .Если я установлю URL-адрес YouTube на autoplay=1, скрытый DIV будет проигрываться в фоновом режиме при загрузке страницы.

// Here is the linked image
<a id="inline" href="#video"><img src="someimage.jpg" alt="Description" /></a>

// Here is the hidden DIV
<div style="display:none">
  <div id="video">
    <iframe title="YouTube video player" width="640" height="390" src="###YOUTUBE LINK###rel=0&amp;hd=1&amp;autoplay=0" frameborder="0"></iframe>
  </div>
</div>

// Here is the script
<script type="text/javascript">
  $("a#inline").fancybox({
    'hideOnContentClick': true,
  });
</script>

Я думаю, мне нужно сделать что-то вроде Bind () событие и строка заменяются, чтобы изменить autoplay=0 на autoplay=1, но я попробовал несколько вариантов безуспешно

Есть мысли, пожалуйста?

1 Ответ

8 голосов
/ 01 марта 2011

Сначала измените href вашего связанного изображения на URL-адрес YouTube, убедившись, что "autoplay=1" как эта ссылка (НЕ встраивает URL).Затем избавьтесь от скрытых <div> и , следуя совету 4 на странице «Советы и хитрости» FancyBox , которая довольно проста:

$("#tip4").click(function() {
    $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'     : 680,
            'height'        : 495,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                 'wmode'        : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });

    return false;
});

Делая это таким образом, люди по-прежнему могут смотреть видео, даже если для них отключен JS.

...