web-dev-qa-db-ja.com

自動再生を有効にせずに、YouTube埋め込みのコントロールを非表示にできますか？

<iframe width="100%" height="100%" src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen>

？autoplay = 1を削除すると、ビデオは機能しません。自動再生を有効にしないとcontrolsパラメーターを使用できないようです。

これがYouTubeの埋め込み記事に記載されていない理由はわかりません。

私が間違っていることを願っています。

https://developers.google.com/youtube/player_parameters#controls

youtube
50
Joe Isaacson

自動再生= 0に設定

<iframe width="100%" height="100%" src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=0&showinfo=0&controls=0" frameborder="0" allowfullscreen>

ここに見られるように： Autoplay = 0 Test

109
Alice

Iframe YouTubeを引き続き使用するには、?autoplay=1を?autoplay=0に変更するだけです。

これを実現する別の方法は、YouTube JavaScript Player APIを使用することです。 （ https://developers.google.com/youtube/js_api_reference ）

編集：YouTube JavaScript Player APIはサポートされなくなりました。

<div id="howToVideo"></div>

<script type="application/javascript">

    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = false;
    ga.src = 'http://www.youtube.com/player_api';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);

    var done = false;
    var player;

    function onYouTubePlayerAPIReady() {
        player = new YT.Player('howToVideo', {
            height: '390',
            width: '640',
            videoId: 'qUJYqhKZrwA',
        playerVars: {
            controls: 0,
            disablekb: 1
        },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        console.log('onPlayerReady', evt);
    }
    function onPlayerStateChange(evt) {
        console.log('onPlayerStateChange', evt);
        if (evt.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }
    }

    function stopVideo() {
        console.log('stopVideo');
        player.stopVideo();
    }

</script>

例のjsfiddleは次のとおりです。 http://jsfiddle.net/fgkrj/

プレーヤーの「playerVars」部分でプレーヤーコントロールが無効になっていることに注意してください。あなたが作る一つの犠牲は、ユーザーがクリックすることでビデオを一時停止できることです。停止イベントをサブスクライブし、player.playVideo()を呼び出す単純なJavaScript関数を作成することをお勧めします。

12
Jonn

autoplay=0を使用します

自動再生には2つの値が必要です。

Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.

重要な部分

autoplay=0&showinfo=0&controls=0

ここにあなたの問題のデモがあります FIDDLE

8
Ajey

この?showinfo=0&iv_load_policy=3&controls=0をsrcの最後の前に追加すると、右下のYouTubeロゴを除くすべてが削除されます
作業例： http://jsfiddle.net/42gxdf0f/1/

4
Andrei
?modestbranding=1&autohide=1&showinfo=0&controls=0

autohide=1

私が見つけたことのないものですが...それが鍵でした:)私はそれが助けになることを願っています

2
vuchkov

次のようなビデオコントロールの詳細については、こちらをご覧ください https://developers.google.com/youtube/player_parameters

<iframe id="video_iframe" width="660" height="415" src="http://www.youtube.com/v/{{course_url}}?start=7&autoplay=0&showinfo=0&iv_load_policy=3&rel=0"
                frameborder="0"
                allowfullscreen></iframe>

start = 7＆autoplay = 0＆showinfo = 0＆iv_load_policy = 3＆rel = 0 "frameborder =" 0 "

すべてのコントロールがそこに記載されています

1
GrvTyagi

You Tubecontrolsおよびtitleを削除するには、次のようにします。

<iframe width="560" height="315" src="https://www.youtube.com/embed/zP0Wnb9RI9Q?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen ></iframe>

出力付きコード

showinfo=0はタイトルを削除するために使用され、&controls=0はvolume、play、pauseのようなコントロールを削除するために使用されます、expend。

0
Umang Patwa