2023/02/16BookmarkYouTube動画のホームページへの埋め込み方と7つのカスタマイズテクニックホームページとYouTube動画の連動は動画運営上や、ホームページ運営上欠かせないものとなった。ホームページにYouTube動画をただ埋め込むのではなく、ユーザーに適正に見せるための埋め込み方をお伝えしていく。まとめホームページへYouTube動画を掲載する方法まず、YouTubeにアクセスを行い、ホームページに埋め込みたい動画まで進む。その後、赤枠で囲った「共有」と書かれたボタンを押す。YouTube動画の共有方法は以下の通りだ。3点とも大事なので確認してほしい。1URLについて:WordPressを利用している方は、このURLコードをそのままコピーすることで動画を埋め込むことができる。リンクを貼りたい場合も利用する。2開始位置について:開始位置を設定することで、ホームページ上に再生をする時間を決めることが可能になる。3埋め込みコード:こちらのボタンを押して、ホームページに埋め込む。その他、FacebookやTwitterなどの共有ボタンについては、アカウントを持っていれば自動でシェアされる。「埋め込む」のボタンを押すでは、埋め込みコードについて説明していく。3のボタンを押すと、下記のようなコードが出現する。5埋め込みコードこのコードをホームページに埋め込むだけで、動画が表示される。上画像で囲った部分を調整することで、YouTubeの埋め込みサイズを変更できる。開始位置の調整もこちらで調整できる。開始位置を決めることで、ホームページに埋め込んだ際は、その開始位置から動画がスタートする。8プレイヤーのコントロールバーを表示するプレイヤーのコントロールバーはYouTubeの動画の下にある再生ボタンなどがある黒いバーを指す。表示したい場合はチェックを入れる。保存されない仕組みだ。チェックを外していて問題はない。詳しくは「動画と再生リストを埋め込む」を確認してほしい。埋め込みコードを編集し、画像サイズを整えるデフォルトは「横560×縦315」ピクセルとなっている。この数字を変更することで、画像のサイズを調整することが可能だ。height=”315′′」と記載があるはずだ。この部分が画像のサイズをあらわすので、好きなサイズに変更が可能になる。適性比率は「16:9」なので、比率を合わせておけば違和感がない。実際の埋め込んだ、動画は以下になる。上動画は「横610×縦343」のサイズだ。比率の計算が面倒な方は、以下のように横幅を100%に設定し、縦軸のピクセルだけを決めれば、問題なく表示されえる。埋め込みコードのカスタマイズテクニックYouTubeの埋め込みにはホームページをより良く見せるテクニックがいくつか存在するので紹介しよう。参考にカスタマイズしてみてほしい。YouTubeのタイトルバーを消す(上画像)YouTubeのタイトルバーは画像も見にくく、YouTubeのサイトへの飛びやすく離脱の原因にもなるため、消込みをかける。共有ボタンやYouTubeへのリンクも消えてスッキリした印象になる。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。?showinfo=0合わせると「src=”//www.URL?showinfo=0」と追加する。下記サンプルコードも参照。allowfullscreen="allowfullscreen"></iframe>YouTubeのロゴを消す(上画像参照)YouTubeへの誘引を行ってしまうため、ロゴが嫌と言う方におすすめだ。そんな小さなことは気にしない方は無視してほしい。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。?modestbranding=1合わせると、「src=”//www.URL?modestbranding=1」と追加する。下記サンプルコードも確認してほしい。allowfullscreen="allowfullscreen"></iframe>YouTubeの下のメニューごと消す(上画像)先ほどのロゴどころが、全てのメニューを消したい場合は下記のようなコードを追加する。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。?controls=0合わせると、「src=”//www.URL?controls=0」と追加する。下記サンプルコードも確認してほしい。YouTubeを自動再生させるホームページに埋め込んだYouTube動画のページを開くと共に自動再生を行うやり方だ。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。?autoplay=1合わせると、「src=”//www.URL?autoplay=1」と追加する。下記サンプルコードも確認してほしい。allowfullscreen></iframe>YouTubeの画像をループさせる短い動画などの場合、再生を押した時点で、停止ボタンを押すまでループさせる方法。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。?loop=1合わせると、「src=”//www.URL?loop=1」と追加する。下記サンプルコードも確認してほしい。allowfullscreen></iframe>YouTubeを指定の位置で停止・再生させるYouTube動画を指定の位置で、再生し、停止させる埋め込みコードの修正方法だ。長い動画で編集したくない場合に重宝する。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。?start=(再生秒数)?end=(停止秒数)仮に再生秒数が50秒から、停止が100秒だった場合の埋め込みコードは、「src=”//www.URL?start=50&end=100」と追加する。間に「&」を入れる必要があるので注意しよう。下記サンプルコードも確認してほしい。allowfullscreen></iframe>YouTubeにデフォルトで字幕を表示させる知らない方もいるかもしれませんが、YouTubeには字幕機能が搭載されている。こちらも埋め込みコードに追加するだけで、常に字幕をONの状態にすることができる。英語の動画などには最適だ。埋め込みコードの「src=”//www.URL」のコードの後ろに下記コードを追加する。?cc_load_policy=1下記コードも参考にしよう。動画のプレーヤータイプはAS3、AS2の限定なので注意しよう。allowfullscreen></iframe>スマホではみ出たYouTubeのCSSを調整するYouTubeをホームページに画像サイズを調整して埋め込んだ場合、以下画像のようにスマホのサイズがずれていることに気づくことはないだろうか。対処方法は2つあり、両方ともCSSを調整する方法だ。iframeを100%に設定する以下のように、iframeを100%に設定することで、スマホでのYouTubeの横幅のサイズが100%になるため違和感がなくなる。100%;}ただし、他のiframeを利用している場合に影響が出る、縦幅のサイズがPC版と同じ高さになってしまうというデメリットがある。class=””></div>」で囲う必要がある。以下コードを確認してほしい。以上のCSSを設定すれば、PC版とスマホ版で高さなどの調整が可能になる。class=””></div>」で囲う必要があることがデメリットとなる。まとめYouTube動画のカスタマイズに関してはその他色々な方法も存在するが、使用頻度は動画サイトを作成しない限り低く、埋め込みレベルの知識さえあれば問題ない。YouTube動画のカスタマイズに凝る前に他の事も考えていく方が重要だ。2023/02/16Bookmark#YouTubeBookmarkコメント・フィードバックフィードバックいただいた、SEOへのご意見や見解は内容を管理者が確認し、当文章に掲載される可能性がございます。共有からソースコードを取得しホームページ内に書き実行したところ560×315のYouTube画面が出てクリックしたらその大きさのまま再生されるので自作サムネイル420x265px○○.jpgをクリックしたら大きな画面になり再生されるようにしたいのですけどソースの書き方がわからいのでどのように書けばいいのか教えて下さい、お願いします。Migrationプラグインの使い方ユーザーモデル(ペルソナ)を考えるための28項目そもそもWEBライティングって何?初心者のためのWEBライティング講座に行ってみた(異動)SEO百科事典このSEO百科事典は、SEOの知識データベースであり、備忘録として作成・更新しているウェブサイトです。Google等の検索エンジンのSEOについての正確な情報及び、当サイトの見解・考察を掲載しながら、閲覧ユーザーの方からのコメントの繁栄、又は質問への回答の反映などを行い、正しい「SEO百科事典」を作ることを目的としています。Tsuji(@SEO21842314)Insert。