Youtube on qwerty.work

【YouTube】再生終了後の関連動画を非表示にしたい

Wed, 04 Jan 2023 00:00:00 +0000

再生後の関連動画の表示を止めたい

WEBページに埋め込んだYouTube動画を再生した最後に関連動画が表示されることがあります。特に会社のコーポレートサイトなど、会社紹介用のイメージ動画だった場合、関係の無い動画のサムネイルは表示して欲しくない場合がありますが、これを防ぐ方法はないようです。

例えば、なかやまきんに君の以下の動画場合、

再生終了後は以下のように、いろいろなチャンネルの関連動画が表示されて停まります。

[caption id=“attachment_132” align=“alignnone” width=“700”] YouTube関連動画（おすすめ動画）の表示例[/caption]

しかし、同一チャンネルの関連動画に限定はできるようです。

動画URLの最後に?rel=0を付ける

iframe内にあるsrcの部分にあるYou-Tube動画のURLの後ろに?rel=0というパラメータを追加することで、関連動画の内容を同一チャンネルに限定することができます。

例

src="https://www.youtube.com/embed/63gy4XeJYp0?rel=0"

この?rel=0を追記した再生終了後は、なかやまきんに君の関連動画のみになりました。

[caption id=“attachment_133” align=“alignnone” width=“700”] YouTube関連動画（おすすめ動画）の表示例[/caption]

同一チャンネルに動画が一つしかない場合

なかやまきんに君のチャンネルには沢山の動画があるので、おすすめ動画として沢山のサムネイルが表示されますが、企業や会社紹介やお店のＣＭなど、そのチャンネルに動画が一つしかない場合は、関連動画は表示されず、最後のシーンが表示されたままで停まります。

参考ページ

https://webdesign-trends.net/entry/14279#rel https://webdesign-trends.net/entry/14279#rel

https://developers.google.com/youtube/player\_parameters?hl=ja#rel https://developers.google.com/youtube/player\_parameters?hl=ja#rel

【YouTube】再生や早送りに便利なショートカットキー

Sun, 27 Feb 2022 18:54:44 +0900

パソコンでYou-Tubeを再生するときに便利なショートカットキー

長い動画で見たい部分まで飛ばしたいとき、マウスのクリックで微調整が難しいときがあります。そんなときはショートカットキーを使うと5秒早送りとか10秒早送りとかできます。それいがいにも覚えると便利なショートカットキーが存在していますんので調べてメモしました。WindowsとMacでほぼ同じですが、一部違うものがあるみたいです。

ちなみに、You-Tubeのサイト内でShift＋/キーを押すと、以下のショートカットキーの画面が表示されます。

全般

  **機能**
  **キーボード ショートカット**




  全画面モードの オン
  F


  全画面モードの オフ
  FまたはEsc


  シアターモードを切り替え
  T


  ミニプレーヤーで再生
  i


  ミニプレーヤーを終了
  Esc


  動画のミュート / ミュート解除
  M


  検索ボックスに移動
  /


  キーボードショートカットを表示する
  Shift＋/

再生

  **機能**
  **キーボード ショートカット**




  再生 / 一時停止
  SpaceまたはK


  巻き戻し（5秒） 
  ←


  巻き戻し（10秒） 
  J


  早送り（5秒）
  →


  早送り（10秒）
  L


  前の動画に移動
  Shift+P


  次の動画に移動
  Shift+N


  前のフレーム（一時停止中）
  ,


  次のフレーム（一時停止中）
  .


  再生速度を上げる
  >またはShift+,


  再生速度を下げる
  またはShift+.


  動画の先頭
  Homeまたは0


  最後に移動
  End


  動画の 10～90% の位置に移動
   1～9


  前のチャプターまでシーク
  Shift+←


  次のチャプターまでシーク
  Shift+→

音量

  **機能**
  **キーボード ショートカット**




  動画のミュート / ミュート解除
  M


  音量を 5% 上げる
  ↑


  音量を 5% 下げる
  ↓

字幕

  **機能**
  **キーボード ショートカット**




  字幕の オン / オフ（字幕がある場合）
  C


  テキストの不透明度レベルを調整
  O


  ウィンドウの不透明度レベルを調整
  W


  フォントサイズの変更（大きくする）
  +


  フォントサイズの変更（小さくする）
  -

360° 動画

  **機能**
  **キーボード ショートカット**




  上を見る
  W


  左を見る
  A


  下を見る
  S


  右を見る
  D


  ズームイン
  テンキーの+または]


  ズームアウト
  テンキーの-または[

参考サイト

https://support.google.com/youtube/answer/7631406?hl=ja https://support.google.com/youtube/answer/7631406?hl=ja

【YouTube】1000人と4000時間達成したときに届く収益化開始のお知らせと設定の流れ

Thu, 06 May 2021 21:33:09 +0900

収益化の基準をクリアすると？

YouTubeの収益化（動画が再生中に表示される広告による広告収入）の権利をゲットするためには以下の基準をすべてクリアする必要があります。

チャンネル登録者数1000人
動画総再生時間4000時間

達成すると、YouTube Sutadio の**『収益受け取り』の画面に[申し込む]**のボタンが表示されます。これを押しても審査や他に必要な手続きが待っていますので、収益化目的で動画を公開されている方は、ボタンが現れたた速攻でポチりましょう！

YouTubeと共に成長していきましょう

YuTubeパートナープログラムに参加すると、動画から収益を得たり、クリエイターサポートを受けたりできます。

画面の指示に従って手続き

次に、以下の画面が現れます。ここで重要なのが、Google Adsense の申込です。アフィリエイトをされている方はご存知だと思いますが、ホームページやブログに広告を表示させ、クリックされたら広告収入が入るアレです。

YouTubeの広告収入はGoogle Adsense経由で支払われるため、この登録と連携がないと、収益を受け取れません。受取口座もこちらに設定します。

なお、収益が累計8,000円を超えないと口座には振り込まれません。具体的に言うと、月末締め時点でAdSenseとYouTubeの収益を合算した累計が8000円を越えていると、翌月22～23日あたりに口座に**『グーグル（ド』名義で振り込まれます。入出金明細に『グーグル（ド』**の記載があるとテンション上がります。

審査後、歓喜の承認メールが届く！

審査は数日かかりますが、承認されると以下のようなメールが届きます。私の場合、承認されるまで10日くらいかかりました。

お客様のYouTubeチャンネル（XXXXX）のYouTubeパートナープログラムへの参加が承認され、YouTubeで収益化できるようになりました。

早速、収益化の設定をする！

YouTube Sutadioを開き、 [動画を収益化] をクリックします。

収益化する動画の選択方法を指定する

収益化が承認されるまでの過去の動画も収益化対象となるので、『すべての動画を今すぐ収益化』を選択して [設定を適用] をクリックします。

収益化の列が表示されるようになった！

**『コンテンツ』の画面には、今まで無かった『収益化』**の列が表示されるようになり、設定が適用されると順次、収益化の設定がオンになります。ここで動画ごとに収益化の設定がどうなっているか一目でわかります。

動画毎に収益化のオン・オフを切り替えられる

個別に収益化のオンとオフを後で切り替えることもできます。

以上。これで、動画に広告が表示されるようになります。

YoutTubeの埋め込みIFLAMEをレスポンシブ対応するCSS

Sat, 23 May 2020 13:56:06 +0900

モバイルページではYouTubeの画面がはみ出る

最近はページにYouTubeの動画を埋め込むことが増えてきました。スマホでそのページを見たときに動画の画面がはみ出ていたので自動的に幅に合わせて表示を変えてくれるレスポンシブに対応する方法を探しました。CSS（スタイルシート）で簡単にできることがわかったのでメモ。

まずは埋め込みタグをで囲む

YouTubeの埋め込みタグを以下のように``で囲みます。

ついでにloading="lazy"を加えて遅延表示対応しています。

<div class="youtube">
<iframe width="560" height="315" src="//www.youtube.com/embed/j1fyn12NH5s" frameborder="0" allowfullscreen loading="lazy"></iframe>
</div>

ちなみに以下の動画は随分前の森永ミルクキャラメルのCMで最後に小さな女の子の笑顔がたまらなく可愛くて、こちらまで幸せな気分になってしまうお気に入りの動画です。

予備動画 1 2

レスポンシブ対応するCSS

最近のaspect-ratioを使用する方法

以前はpadding-top: 56.25%;を使って16:9の縦横比（アスペクト比）に合わせてレスポンシブ対応していましたが、ここ最近ではaspect-ratioがほとんどのモダンブラウズで使えるようになり、簡単にできるようになったみたいです。

ソース例

.youtube {
    aspect-ratio: 16 / 9;
}
.youtube iframe {
    width: 100%;
    height: 100%;
}

または

iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
}

後述の従来のposition: relative;とposition: absolute;とpadding-top: 56.25%;を組合せて使うより簡単でいいですね。

参考サイト

aspect-ratioとobject-fit: cover;について、以下のページが参考になりました。

https://moshashugyo.com/media/aspect-ratio https://moshashugyo.com/media/aspect-ratio

https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html https://coliss.com/articles/build-websites/operation/css/about-aspect-ratio-in-css.html

ブラウザの対応状況

https://caniuse.com/mdn-css_properties_aspect-ratio https://caniuse.com/mdn-css_properties_aspect-ratio

https://caniuse.com/?search=object-fit https://caniuse.com/?search=object-fit

従来のpadding-top: 56.25%;を使用する方法

You-Tubeの埋め込みのサイズでよくあるwidth="560" height="315"の指定があってもページ幅最大に動画を表示するaspect-ratioを使わない従来の方法。PCの場合、サイトの作りによっては幅いっぱいに大きく表示されるようになります。スマホなどは適度な大きさで画面幅に合わせたレスポンシブ表示されます。aspect-ratioを使用するより、コードが多いのですが、IEなど古いブラウザ対応が必要な場合はこちらを使うことが必要になります。

ソース例

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
  }
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }

4:3の場合 padding-bottom: 75%;
16:9の場合 padding-bottom: 56.25%;
padding-bottomはpadding-topでも可。

padding-bottom: 56.25%;は16:9の幅16を100％にしたときの高さ9がナンバーセントの比率かを意味するかを意味しています。以下のページが参考になります。これを入れないとwidth: 100%;だけだと高さは変わらず、横だけがレスポンシブになってしまいます。これを入れることにより、縦横比を維持した状態でレスポンシブ表示する対応方法となっています。

参考ページ

https://h2ham.net/youtube-responsive/ https://h2ham.net/youtube-responsive/

従来の方法でスマホ用にちょっと手を加えた例

スマホなどのモバイルページではレスポンシブ表示して、PCなどは大きくなりすぎないように、埋め込みコードの指定通りwidth="560" height="315"で表示する場合の例です。私の場合、埋め込みコードの幅560ピクセルに合わせて、最大559ピクセルまでの解像度でアクセスした場合はレスポンシブ表示するようにしました。

@media screen and (max-width:559px){
   .youtube {
	   position: relative;
	   width: 100%;
	   padding-top: 56.25%;
	   margin: 0.5em 0 1em;
   }
   .youtube iframe {
	   position: absolute;
	   top: 0;
	   right: 0;
	   width: 100% !important;
	   height: 100% !important;
   }
}

動画を連続して埋め込んだときのためにmargin: 0.5em 0 1em;を加えて、上下に余白を入れて動画同士の間に隙間を作るようにしました。

試しにこのページを560px以下の解像度のスマホで見ていただければYouTube動画が幅いっぱいに収まっているはずです。

その他参考ページ

https://design.webclips.jp/youtube-movie-size/ https://design.webclips.jp/youtube-movie-size/

https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c https://qiita.com/0084ken/items/e7d35d2a8eb507f4d59c

YouTube埋め込みコードに自動再生や字幕の設定をするパラメータ例

Wed, 20 May 2020 22:56:42 +0900

動画の初期設定をあらかじめ指定したい

サイトに埋め込んだ外国のYouTube動画の再生時に、いちいち翻訳字幕の設定するのは煩わしいので、**『はじめから翻訳をONにしてサイトに埋め込むことはできないのかな？』**と思って検索したら方法があったのでメモ。

参考サイト

https://support.google.com/youtube/answer/171780?hl=ja https://support.google.com/youtube/answer/171780?hl=ja

https://wisdommingle.com/youtube-embedded-player-parameter-customize/ https://wisdommingle.com/youtube-embedded-player-parameter-customize/