ベストセラー人気 WordPress テーマTop 30 詳細

YouTubeの映像の自動再生されるように挿入する方法

Last Updated:2021年9月30日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

YouTubeの映像を WordPress私のブログに挿入するときに自動再生されるようにしたい場合は、この記事で紹介する方法でYouTubeのビデオを埋め込むコードを挿入することができます。 モバイル機器では、自動再生にならないように制限されるが、下で紹介するにはJavaScriptを使用して、モバイル機器でも自動再生が可能です。

YouTubeの映像の自動再生/リピート再生されるように挿入する方法

HTML動画の自動再生MP4ファイル

MP4ファイルを直接サーバーにアップロードして、自動再生されるようにしたい場合は、次のようなHTMLコードを使用することができます。

<video controls autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

コミュニティに動くGIFファイルが多く使用されたウムチャルGIFは古い規格であり、非効率的なので、今は徐々にMP4ファイルに置き換えられています。 これに関連し、「GIFの使用を止めてください!」を参照してみてください。

動くGIFファイルをMP4ファイルに変換してくれるサイトもあります。 例: GIF to MP4 converter.

YouTubeの映像の自動再生されるように挿入する

動画ファイルをサーバに直接アップロードして挿入する場合の動画の容量のために多くのトラフィックを発生することがあります。 したがって、動画ファイルは、(Webホスティング)サーバに直接アップロードする方法はなく、YouTubeチャンネルにアップロードして共有する方法が多く使用されます。

YouTubeのビデオを自動的に再生されるように挿入する場合埋め込みコード内の動画のURLの後ろに ?autoplay = 1を追加します。

ユーチューブで共有する映像の「共有]ボタンをクリックして、「埋め込み」をクリックして、YouTubeの映像埋め込みコードをコピーします。

YouTubeの映像の自動再生/リピート再生されるように挿入する方法

YouTubeの映像を挿入コードは、次のようにします。

<iframe width="560" height="315" src="https://www.youtube.com/embed/fNU-XAZjhzA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

コードでYouTubeの映像URL(例えば、 https://www.youtube.com/embed/fNU-XAZjhzA)の後に ?autoplay = 1を追加します。 しかし、クロムは、ユーザーインタラクションなしにオーディオコンテンツを自動的に再生されないように防いでいるそうです。 だから &mute = 1 パラメータを追加すると、クロムでも自動再生が機能します。

最終的には、次のようなコードになります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/fNU-XAZjhzA?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

自動リピート再生するには、 &loop = 1を追加するようにします。

ちなみに反応型で動作するようにしたい場合は、 "WordPress:モバイル機器でYouTubeの動画が切り捨てられずに表示されるようにする「の」のHTMLコードでYouTubeの動画を追加する方法」の部分を参照してください。

WordPressで「カスタムHTML」ブロックに、上記のコードを追加します。 寀ーブログでは、HTMLモードでは、上記のコードを好きなところに直接挿入します。

この方法で、YouTubeの映像を挿入すると、 WordPressで、次のように映像が自動的に再生されます。

しかし、モバイル機器では、自動再生ができないことです。 これは、モバイル機器からのデータを排出しないように制限しているからです。 モバイルでも自動再生されるようにしたい場合は、以下の方法を利用することができます。

モバイルでもYouTubeの映像自動再生されるようにする

モバイル機器でもYouTubeの動画が自動的に再生されるようにしたい場合Stackoverflowの文 "Youtubeの新しい埋め込みコードスタイルを使用してビデオを自動再生するにはどうすればよいですか?「(ユーチューブの新しい埋め込みコードスタイルを使用して動画を自動再生する方法)で提示するJavaScriptコードを使用することができます。

<div id="player"></div><script>
                    var tag = document.createElement('script');
                    tag.src = "https://www.youtube.com/iframe_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];
                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                    var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: 'VideoID',
      playerVars: {   
            'autoplay': 1,   
            'rel': 0,
            'showinfo': 0,
            'modestbranding': 1,
            'playsinline': 1,
            'showinfo': 0,
            'rel': 0,
            'controls': 0,
            'color':'white',
            'loop': 1,
            'mute':1,
            // 'origin': 'https://meeranblog24x7.blogspot.com/'
      },
      events: {
        'onReady': onPlayerReady,
        // 'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerReady(event) {
    player.playVideo();
    player.mute();
  }var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

上記のコードで VideoID 部分をユーチューブ映像のvideoidに置き換えるようにします(例えば、 fNU-XAZjhzA)。 上記のコードをそのまま使用する場合は、コントロールが表示されません。 コントロールが表示されるようにするには、 「controls ':0「controls ':1に変更されます。

また、 「showinfo ':0が追加されているが、このパラメータは、使用が中止されて、もはや機能していないため、このラインは、削除してもなりそうです。

この方法で映像を挿入すると、Javascriptをロードする必要があるため、映像が少し遅れてロードされ、モバイル機器でも動作します。 例:

最後に、

以上で、YouTubeの映像を自動的に再生されるようにブログに挿入する方法について説明しました。 本文で提示する方法を利用すれば、Google Chromeは、マイクロソフトエッジブラウザは、Firefoxなどのブラウザで正常に動作します。

気分が憂鬱とき元気がダウンするときには憂鬱な音楽ではなく、モーツァルトの音楽やドヴォルザーク交響曲第9番「新世界から」交響曲のように活気に満ちた音楽を聴くと良いようです。

参照



コメントを残す

コメント