私はVimeoにも同様の問題がありました。私が思いついた解決策は、YouTubeやその他の同様の種類の埋め込みのために機能するはずです。
カルーセルの場合、ビデオサムネイル画像を表示するだけです。 YouTubeとVimeoの両方で、サムネイルをさまざまな解像度で簡単に取得できます(たとえば、YouTubeの場合はHow do I get a YouTube video thumbnail from the YouTube API?)。各画像に(一意の)IDが含まれていることを確認して、動画の埋め込みに必要なすべての詳細を取得できるようにします(YouTube IDをHTML IDとして使用するなど)。
イメージにjQueryクリックハンドラを添付します。クリックハンドラは、画像のIDから表示するビデオに関する関連情報を取得し、カルーセルコンテナを隠し、関連するコードを挿入して、カルーセルと同じ位置の別の要素にビデオを表示します。例えば
: -
<div id="carousel">
<img src="youtubethumbnailurl1" id="1234" />
<img src="youtubethumbnailurl2" id="2345" />
<img src="youtubethumbnailurl3" id="3456" />
</div>
<div id="video"></div>
<script type="text/javascript">
jQuery(function($) {
$('#carousel img').click(function(e){
e.preventDefault;
$('#carousel').hide();
var video_id = $(this).attr("id");
$('#video').html(vid_iframe(video_id)).show();
return false;
});
function vid_iframe(video_id) {
return "<iframe src='youtubeurl'+video_id+'youtubeParameters'?</iframe>";
}
});
</script>
あなたがビデオを閉じて、必要であれば、カルーセルに戻るには、適切なハンドラを追加する必要があると思います。
これはちょっと複雑ですが、どのような種類の埋め込みにも適用でき、また、どのように表示されるのかについて多くの柔軟性を与えます(私の場合、サムネイルは再生時の実際の映像よりもはるかに小さくなければなりません) 。