5

YouTube API ドキュメントでは、埋め込みプレーヤーの最小サイズを 200px x 200px と定義しています (リンク)。

重要なプレーヤー機能のためのスペースを確保するために、プレーヤーは少なくとも 200 ピクセル x 200 ピクセルである必要があります。

私のテストでは、これが真実であるという結論に達しました。最小サイズより小さいプレーヤーでビデオを再生しようとすると、「ビデオ プレーヤーが小さすぎます」というエラー メッセージが表示されます。ビデオは再生されません。

ただし、小さいプレーヤーは可能です。たとえば、 SwitchCamは、このようなページでそれらを使用します。

SwitchCam 小型プレーヤー

高さと幅の属性を設定し、スタイル属性を使用して、高さと幅が設定された要素にラップすることで、プレーヤーのサイズを小さくしようとしました。これらのオプションはどれも機能していないようです。

プレーヤーのサイズを小さくするには、他に何ができますか?

編集

非常に小さなプレーヤーで再生できる動画もあれば、そうでない動画もあるようです。潜在的な解決策をテストする場合は、次のビデオ ID を使用してください:-rMTExNTx2s

4

2 に答える 2

7

一部の動画には、200*200 (px) 未満のサイズの動画を埋め込むことができないという制限があるようです。この制限は、すべてのビデオに適用されるわけではありません (最終更新の youtube API よりも古いかもしれませんが、わかりません)。

いくつかのテストの後、この制限は、YouTube プレーヤーの ReadyState がステータスに変更されたときに適用されます。PlayerState.PLAYING (evt.data === 1)

したがって、基本的な回避策として、ステータスが更新された後に「オンザフライ」で iframe のサイズを変更できます。以下のデモとコードを参照してください。

デモ

var player,
     myWidth = "114px",
     myHeight = "65px";

 function onYouTubePlayerAPIReady() {
     player = new YT.Player('testVideo', {
         height: myWidth,
         width: myHeight,
         videoId: '-rMTExNTx2s',
         events: {
             'onReady': onPlayerReady,
             'onStateChange': onPlayerStateChange
         },
          playerVars: {
             controls:0,
             showinfo:0
          }        
     });
 }

function onPlayerStateChange(evt) {
     if (evt.data == -1) {
        evt.target.a.width = "200px"; 
        evt.target.a.height = "200px"; 
     }
     else if (evt.data == 1) {
          evt.target.a.className = "";
         evt.target.a.width = myWidth; 
         evt.target.a.height = myHeight; 
         done = true;
     }
 }

この DEMO でわかるように、css で隠しクラスを設定し.hidden{opacity:0}ます。これは、ビデオがロードされる前にプレーヤーを非表示にするために使用されます。使用display:none;しても機能しません。これは確かに他の API の制限です。このデモでは、プレーヤーが表示されるまで、ビデオの再生が開始されるまで待つ必要があります。たとえば、サムネイル画像を使用し、readystate が変更されたときに負のオフセット プレーヤーから目的の場所に移動するなど、ニーズに合った最適な回避策を見つける必要があります。

于 2013-05-14T11:55:29.370 に答える
2

最も洗練されたソリューションではありませんが、実際にCSS3 transform: scale()プロパティを使用してより大きなプレーヤーを縮小することを考えたことがありますか? IE < 9 ではサポートされていないことに注意してください。

ただし、これを行わない主な理由は、UI コントロールのサイズを縮小することになり、その結果ユーザビリティが低下することです。

于 2013-04-29T17:32:12.660 に答える