Colorboxの「relfunction」を使用して、ローカル画像とyouTubeビデオの混合物を1つのライトボックスに表示しています。これは、ある程度まで達成できました。問題は、複数のビデオを挿入する必要があることですが、挿入すると、「Request unsuccessful:error」が表示された状態で、カラーボックスに複数のビデオをロードできません。幅と高さが設定されたiframeで表示するように動画を設定しましたが、1が機能するのに1以下である理由がわかりません(最初に表示されたものが常に表示され、他は表示されない順序に切り替えると、ソースビデオは大丈夫だと知っています。
これが私のコードです:
<script>
jQuery(document).ready(function () {
jQuery('a.gallery1').colorbox({ rel:'group1' });
jQuery('a.gallery2').colorbox({ rel:'group2' });
jQuery('a.gallery3').colorbox({ rel:'group3' });
jQuery('a.gallery4').colorbox({ rel:'group4' });
jQuery('a.gallery5').colorbox({ rel:'group5' });
jQuery('a.gallery6').colorbox({ rel:'group6' });
jQuery('a.gallery7').colorbox({ rel:'group7' });
jQuery('a.gallery8').colorbox({ rel:'group8' });
jQuery('a.gallery9').colorbox({ rel:'group9' });
jQuery('a.gallery10').colorbox({ rel:'group10' });
jQuery('#video').colorbox({iframe:true, innerWidth:493, innerHeight:370});
});
</script>
<a class="gallery1" href="images/content/cosmos1Full.jpg" title="Salvatore Arancio, title of work, year">
<img src="images/content/cosmos1.jpg" alt="cosmos1" width="484" height="370" />
<a class="gallery1" href="images/content/ohoopee2.jpg" title="Salvatore Arancio, title of work, year">
<a class="gallery1" href="images/content/ohoopee3.jpg" title="Salvatore Arancio, title of work, year">
<a class='gallery1' href="http://vimeo.com/moogaloop.swf?clip_id=29956704&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&" title="Ed Atkins, 'Death Mask 3', 2011. Extract." id="video">
<a class='gallery1' href="http://www.youtube.com/v/rhCssm8BMNM?version=3" title="A Tumour (Ed Atkins)" id="video"></a>