0

2 つの例:

モーダル ダイアログ/ライト ボックス現象に似ています。その中で...

  • 背景が暗くなる、またはぼやける (ただし、通常のライトボックスよりもローカライズされた方法で)
  • ビデオ/モーダルの開始は、リンクをクリックすることによってトリガーされます
  • ビデオを閉じると、a) 再生が停止し、b) ビデオが非表示になり、c) ビデオが置き換えられたコンテンツが再び表示されます

ただし、よりシームレスなエクスペリエンスを提供します。その中で...

  • ビデオは、ページの特定の要素内に配置されます (ページ ラッパーまたはビューポートに関連するのではなく)。
  • ビデオは、コンテンツの上に座っているだけでなく、コンテンツを置き換えたり隠したりすることがよくあります

ただし、ここに問題があります... これらの例は両方とも独自のビデオ プレーヤーを使用しています。この状況では、それは契約違反です。YouTubeのiframe埋め込みコード（新しいもの）を使用するために必要です。

4

1 に答える 1

0

これはかなり堅牢なソリューションです。しかし、私はJSが苦手なので、完全なハックジョブです. 自由に反復または発散してください。

それがまともに行うこと：

  • リンクを押すと、「その場で」YouTubeビデオを表示/非表示にします
  • 概念実証としての楽しい背景ぼかしなど
  • 流動的な幅のフレームには、ビデオが適合するため、流動的な幅のビデオが含まれています

悪いこと:

  • これ.videoWrapperは、ビデオの高さに合わせて自動的にサイズ調整されます (vid に適合するため)。これは理想的ではありません。なぜなら、コンテナーを拡大/縮小して、前後に保持されたコンテンツに合わせてコンテナーを拡大/縮小できると便利だからです (ビデオの最大の高さで貼り付けます)
  • ビデオが非表示になっても再生が停止しない
  • 他に気づくこと。

作業例: http://codepen.io/jonamar/pen/JAfqc

jQuery とhttp://fitvidsjs.comが必要です

HTML

<section class="videoWrapper">
<!-- the <h1> and <a> get replaced -->
<h1>Watch the best video ever</h1>
<a class="control play" href="#">Play</a>
<a class="control hide" href="#">Hide</a>
<iframe width="560" height="315" src="http://www.youtube.com/embed/5SjtrUYRYx4?rel=0" frameborder="0" allowfullscreen=""></iframe>
</section>

CSS

* {-webkit-transition-duration: 1s;}

.videoWrapper {
  margin: 0 auto; 
  width: 40%;
  padding: 20px; 
  background: #eee;
  }

iframe, .hide {display: none;}

.showVideo {background: #444;}

.showVideo h1{
  color: transparent;
  text-shadow: 0 0 6px rgba(0,0,0,0.60);
  }

.showVideo a {color: white;}

JS

$(document).ready(function () {

$('.control').click(function () {

  $('.videoWrapper iframe').toggle();
  $('.videoWrapper .play').toggle();
  $('.videoWrapper .hide').toggle();

  var showVideo = $('.videoWrapper').hasClass('showVideo');

  if (showVideo === true) {
    $('.videoWrapper').removeClass('showVideo');
  } else {
    $('.videoWrapper').addClass('showVideo');
  }

});

$(".videoWrapper").fitVids();

});
于 2013-03-27T23:42:39.740 に答える