ファンシーボックスを使用して、シンプルな vimeo ポップアップを作成しています: http://fancyapps.com/fancybox/
これが私のjQueryです：
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
padding: 0
});
ここに私のHTMLがあります：
<a class="fancybox" href="http://vimeo.com/5319920">
<img class="video_preview" src="/assets/home/video_preview.png">
</a>
問題は、The requested content cannot be loadedログに記録されたエラーなしでエラーが発生することです。明らかにスクリプトが呼び出されています。
ここで何が起こっているのでしょうか、何かアイデアはありますか? 私は完全に途方に暮れています。
ありがとう！
あと2つだけ必要です。
1)。次のようなfancybox-media ヘルパーjsファイルを追加します (自分のパスを確認してください)。
<script type="text/javascript" src="{your_path}/helpers/jquery.fancybox-media.js"></script>
2)。helpers メディア オプションをスクリプトに追加します。
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
padding: 0, //<-- notice I added a comma here ;)
helpers : {
media : {}
}
});
マシン上でこれをローカルで試している場合、アドインがリンクを使用してビデオにアクセスしようとしている可能性があります
file：//player.vimeo.com/video/5319920？hd = 1＆autoplay = 1＆show_title = 1＆show_byline = 1＆show_portrait = 0＆color =＆fullscreen = 1
これを変更するには、@ lucumaの回答に従ってhttp://player.vimeo.comで始まる完全なURLを指定するか、$。fancybox.helpers.media.beforeLoadメソッドを変更します。この方法は、vimeoを含む多くのWebサイトをサポートします。このメソッドは、たとえば変換するなど、指定したhrefを上書きします
to（ローカルで実行している場合）
file：//player.vimeo.com/video/5319920？hd = 1＆autoplay = 1＆show_title = 1＆show_byline = 1＆show_portrait = 0＆color =＆fullscreen = 1
以下のようにmedia.beforeLoad関数を変更してみてください。最後の行のhrefにhttp：//を追加すると、機能するはずです。
$.fancybox.helpers.media.beforeLoad = function(opts, obj) {
var href = obj.href || '',
type = false,
rez;
if ((rez = href.match(/(youtube\.com|youtu\.be)\/(v\/|u\/|embed\/|watch\?v=)?([^#\&\?]*).*/i))) {
href = '//www.youtube.com/embed/' + rez[3] + '?autoplay=1&autohide=1&fs=1&rel=0&enablejsapi=1';
type = 'iframe';
} else if ((rez = href.match(/vimeo.com\/(\d+)\/?(.*)/))) {
href = '//player.vimeo.com/video/' + rez[1] + '?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1';
type = 'iframe';
} else if ((rez = href.match(/metacafe.com\/watch\/(\d+)\/?(.*)/))) {
href = '//www.metacafe.com/fplayer/' + rez[1] + '/.swf?playerVars=autoPlay=yes';
type = 'swf';
} else if ((rez = href.match(/dailymotion.com\/video\/(.*)\/?(.*)/))) {
href = '//www.dailymotion.com/swf/video/' + rez[1] + '?additionalInfos=0&autoStart=1';
type = 'swf';
} else if ((rez = href.match(/twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i))) {
href = '//www.twitvid.com/embed.php?autoplay=0&guid=' + rez[1];
type = 'iframe';
} else if ((rez = href.match(/twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i))) {
href = '//twitpic.com/show/full/' + rez[1];
type = 'image';
} else if ((rez = href.match(/(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i))) {
href = '//' + rez[1] + '/p/' + rez[2] + '/media/?size=l';
type = 'image';
} else if ((rez = href.match(/maps\.google\.com\/(\?ll=|maps\/?\?q=)(.*)/i))) {
href = '//maps.google.com/' + rez[1] + '' + rez[2] + '&output=' + (rez[2].indexOf('layer=c') ? 'svembed' : 'embed');
type = 'iframe';
}
console.log(type);
console.log(href);
if (type) {
obj.href = "http://" + href;
obj.type = type;
}
}
いくつかの問題が発生する可能性がありますが、次のようにすればうまくいくはずです: href を次のように変更します。
//player.vimeo.com/video/36031564?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1
また
http://player.vimeo.com/video/36031564?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1
を追加しますdata-fancybox-type="iframe"
デモ: http://jsfiddle.net/lucuma/9wAdV/180/
<a class="fancybox" href="//player.vimeo.com/video/36031564?hd=1&autoplay=1&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" data-fancybox-type="iframe"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
$(document).ready(function() {
$('.fancybox').fancybox({
});
});