0

YouTube API から取り込まれた動画のリストをファンシーボックスで開く必要があります。ただし、現在、画像をクリックすると、YouTube サイトにリダイレクトされるだけです。

関連するコードは次のとおりです。html.erb

<% @youtube_news.each do |item| %>
        <li>
          <% you_tube_presenter_for(item) do |presenter| %>
              <span class="center videos">
               <%= link_to image_tag(presenter.thumbnail_url), presenter.video_url, :class=> "fancyboxv"  %>
              </span>
              <%= presenter.title %>
              <span class="timestamp">
               Posted <%= time_ago_in_words(presenter.published_date) %> ago
              </span>                                     
          <% end %>
        </li>
    <% end %>

そして、同じページのJS-

<script>
$(document).ready(function(){
 $("a.fancyboxv").fancybox({
    'transitionIn'   : 'none',
    'transitionOut'  : 'elastic',
    'width'          : '640',
    'height'         : '480',
    'href'           : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
      'type'         : 'swf'
      'swf'          :{
             'wmode'          :'transparent',
             'allowfullscreen':'true'
      }
    });

 return false;
});
</script>

ここで何が欠けていますか？これについてご協力いただきありがとうございます。

4

2 に答える 2

2

試す

$(document).ready(function(){
 $("a.fancyboxv").click(function() {
  $.fancybox({
   'transitionIn'   : 'none',
   'transitionOut'  : 'elastic',
   'width'          : '640',
   'height'         : '480',
   'href'           : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
   'type'           : 'swf',
   'swf'            : {
     'wmode'           : 'transparent',
     'allowfullscreen' : 'true'
    }
  }); // fancybox
  return false;
 }); // click
}); //  ready
于 2012-08-20T08:08:09.313 に答える
0

これが私にとってそれを解決したものです: https://stackoverflow.com/a/10882262/470749

$(".youtube").click(function() {
            var destination = $(this).attr('href').replace(new RegExp('youtu.be', 'i'), 'www.youtube.com/embed').replace(new RegExp('watch\\?v=([a-z0-9\_\-]+)(&|\\?)?(.*)', 'i'), 'embed/$1?version=3&$3');
            $.fancybox({
                'padding'       : 0,
                'autoScale'     : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none',
                'title'         : $(this).attr('title'),
                'width'         : 680,
                'height'        : 495,
                'href'          : destination,
                'type'          : 'iframe'
            });
            return false;
        });

HTML: <a class="youtube" href="//www.youtube.com/watch?v=XXXXXX&html5=1&autoplay=1#t=3s" target="_blank">link label</a>

私の目標は、リンクされた Youtube ビデオを、Flash がインストールされていない場合でも、ビデオの再生を自動開始し、IE/Chrome/Firefox/Safari で動作する Fancybox をポップアップさせることでした。Flashを無効にしてIE9でテストしたところ、うまくいきました。

于 2012-09-21T16:54:11.333 に答える