web-dev-qa-db-ja.com

YoutubeIframeは一時停止ビデオを無効にします

Webページでビデオを再生する必要があります。しかし、私はコントロールを否定する必要があります。 「controls = 0」を入れましたが、クリックするとプレイヤーが一時停止します。 YouTubeプレーヤーで「一時停止」アクションを無効にできますか？

iframeyoutubeyoutube-api
12
Sergei Gorjunov

一時停止を完全に無効にする方法はありません。

onStateChange ハンドラーでYT.PlayerState.PAUSEDイベントをリッスンし、それを検出するとすぐにplayVideo（）を呼び出すことができますが、...わかりません。そうではないようです。非常にユーザーフレンドリー。

4
Jeff Posnick

何も載せていないビデオの上にdivコンテナを置いてみることができます。言い換えれば、ビデオ自体と同じサイズの空白のコンテナです。これがすべきことは、誰かがそれをクリックしようとすると、実際にはその上の透明なコンテナをクリックし、一時停止することができないということです。これはうまくいくはずです。空白のdivコンテナが本当にビデオの上にあることを確認するために、z-indexを変更する必要がある場合もあります。 （最初にdivコンテナーを背景色でテストし、色付きのボックスがビデオを覆っている場合は、戻って色を削除すると、同じように機能します。）頑張ってください。

また、disablekbパラメータを1に設定して、ユーザーがスペースバーでも一時停止できないようにします。

23
Gus

DOM要素で次のCSSを使用します。

.ytplayer {pointer-events: none;}
18
osiris rodriguez

HTMLを介してビデオを表示していて、ビデオの表示に使用されるCSSクラスにアクセスできる場合は、次の操作を実行できます。

HTMLは次のようになります。

<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/watch?v=z4O-5eV4LiA"
frameborder="0" allowfullscreen>

お好みのクラス名を追加して、ytplayerを選択します

class="ytplayer"

私の例では次のようになります

<iframe class="ytplayer" id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/watch?v=z4O-5eV4LiA"
frameborder="0" allowfullscreen>

次に、CSSファイルにクラスを変更するためのルールを追加します。 ytplayerを使用しましたが、別のクラス名を選択できます。上記で使用したものと一致していることを確認してください。

.ytplayer {
pointer-events: none;
position: absolute;
}

それはそれをする必要があります。

7
John Doe

「？controls = 0」はプレーヤーの下部のコントロールパネルのみを非表示にしますが、画面をクリックしている間、再生/一時停止は通常どおり機能します

制御パラメータの値は次のとおりです。

  • controls = 0 –プレーヤーのコントロールはプレーヤーに表示されません。 AS3プレーヤーの場合、Flashプレーヤーはすぐに読み込まれます。
  • controls = 1 –プレーヤーコントロールがプレーヤーに表示されます。 AS3プレーヤーの場合、Flashプレーヤーはすぐに読み込まれます。
  • controls = 2 –プレーヤーコントロールがプレーヤーに表示されます。 AS3プレーヤーの場合、Flashプレーヤーは、ユーザーがビデオの再生を開始した後にロードされます。

この記事をチェックしてくださいこれは本当に役に立ちます https://developers.google.com/youtube/player_parameters

1
Roy Sonasish

これは、デスクトップでは一時停止せずにモバイルで許可してビデオを自動再生するための私のコードソリューションです

  <style>
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /* knock out nasty borders */
    outline: 2px solid white !important;
    outline-offset: -1px;
    pointer-events: none;
  }

  .wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 56.25%;
  }

  .element-to-stretch iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffff;
  }

  .wrapper-with-intrinsic-ratio .element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  @media only screen and (max-width: 900px) {
    .noclick {
      display: none;
    }
  }

  .noclick {
    z-index: 2000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="target2">
<div class="noclick"></div>
<div class="wrapper-with-intrinsic-ratio">
<div class="element-to-stretch">
<div class="overlay"><iframe title="YouTube video player" src="https://www.youtube.com/embed/tgbNymZ7vqY?rel=0&amp;autoplay=1&amp;controls=0&amp;disablekb=1&amp;loop=1&amp;playlist=tgbNymZ7vqY&amp;playsinline=1&amp;iv_load_policy=3&amp;mute=1&amp;widgetid=1&amp;widget_referrer" width="100%" height="100%" frameborder="0" allowfullscreen=""></iframe></div>
</div>
</div>
</div>

動画を繰り返し、再生リストの次のアイテムを自動再生しないように注意してください。再生リストを動画ID（youtube）に設定すると、モバイルのブラウザ動画で動画の推奨が行われません

0
Corey Deschambault

これは、ユーザーが何もクリックできないように画面をブロックする方法です。

// block screen so user cant click
var blockDiv = $(document.createElement('div'))
        .attr('id', 'blockDiv')
        .height('100%').width('100%')
        .css({'z-index':'3333', 'position' : 'absolute', 'top': '0', 'left':'0'});
$('body').append(blockDiv);
0
cmac