Fancybox jqueryので開くユーチューブの動画
質問
fancyboxで
することができます私はオープンユーチューブ動画。
私は元のために、ユーチューブの動画リンクのリストを持っています:
<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>
とfancyboxます:
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
私は、各ビデオの新しい埋め込みオブジェクト用に作成する必要はありません。
でいくつかのプラグイン、またはそれを行うために他の方法はありますか?
解決
これが壊れている、SEE EDIT
<script type="text/javascript">
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'wmode':'transparent','allowfullscreen':'true'}
});
</script>
JavaScriptは、それがビデオのユーチューブページを開く無効になっている場合は、この方法で、ユーザーはJavaScriptが有効になっている場合、それはユーチューブでfancyboxを開くには、ビデオを埋め込みます。あなたがしたい場合は、追加することができます。
target="_blank"
あなたのリンクのそれぞれに、それはほとんどの文書型に検証しませんが、fancyboxはそれを拾うていない場合、それは新しいウィンドウでリンクを開きます。
EDIT
コードはthis
下href
を見つけることができませんので、 this
は、上記、正しく参照されていません。あなたはこのようにそれを呼び出す必要があります:
$("a.more").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;
});
http://fancybox.net/blog の#4で覆われるように、上に複製
他のヒント
私はここの回答を使って始めたが、YouTubeの新しいiframe
を使用するように変更され埋め込み...
$('a.more').on('click', function(event) {
event.preventDefault();
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : this.href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?rel=0&autoplay=1',
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
$("a.more").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', // <--add a comma here
'swf' : {'allowfullscreen':'true'} // <-- flashvars here
});
return false;
});
あなたはそれを自動再生機能を追加したい場合。単純に置き換える
this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
と
this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1',
また、あなたは、Vimeoの
と同じことを行うことができますthis.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1'),
と
this.href = this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1') + '&autoplay=1',
ただコピーして、ユーチューブのURLを貼り付け、それは簡単ですので、
これは正規表現があります。あなたは、クライアントのためにCMSを使用する場合に最適です。
/*fancybox yt video*/
$(".fancybox-video").click(function() {
$.fancybox({
padding: 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 795,
'height' : 447,
'href' : this.href.replace(new RegExp("watch.*v=","i"), "v/"),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
ありがとう、アレクサンダー!
そして、ユーチューブのフラッシュコンテンツの追加上記空想、閉じるボタンを設定するための「WMODE」から「SWF」パラメータ:
'swf': {'allowfullscreen':'true', 'wmode':'transparent'}
所属していません StackOverflow