FC2ブログでYouTube動画の埋め込みコードをカスタマイズしてみた


いつもFC2ブログをご利用いただきありがとうございます。
FC2ブログスタッフです。

FC2ブログではYouTube動画を記事内に挿入することができますが、「動画の中でも一部分だけの再生でいいんだけどなぁ・・・」と思ったことはありませんか?

そんな悩みをお持ちの方!実はYouTube動画の埋め込みコードをカスタマイズすることで、プレイヤーのサイズや動画の開始時間を指定することができるんですっ!

そこで今回は、YouTube動画の「埋め込みコードカスタマイズ」についてご紹介したいと思います。

YouTube動画を記事に挿入する


まず始めに、記事編集画面上部にある入力補助ツールから「Youtube動画ツール」をクリックし、キーワード検索で記事内に挿入したい動画を探すか、挿入したい動画URLを入力してください。

ブログ側で表示させるプレーヤーのサイズを選択し、投稿ボタンをクリックすると、記事内にYouTube動画の埋め込み用コードが自動挿入されます。

youtube_1.png


自動挿入されたYouTubeの埋め込みコードを分析してみる


自動挿入されたコードを実装すると、以下のように動画がブログ上に表示されます。

自動挿入されたコードに動画の埋め込みコードについて細かく見ていきましょう。
<iframe width="320" height="180" src="//www.youtube.com/embed/6LQEu-HVE40" frameborder="0" allowfullscreen></iframe>

①プレイヤーサイズの設定
プレイヤーサイズはwidth="320"(横幅) height="180"(高さ)でサイズを指定することができます。ただし、縦横比が合わないと動画が縦長になったり、横長になったりするので注意が必要です。

②表示させる動画の設定
ブログ上で表示させたい動画は、src="//www.youtube.com/embed/6LQEu-HVE40"で指定することが可能です。好きな動画URLをコピー(「Ctrl」+「C」)して、""の間に貼り付け(「Ctrl」+「V」)ます。

③枠線の設定
プレイヤーに枠線をつけるには、frameborder="0"で指定することができます。現在は枠線を表示しない(frameborder="0")設定になっていますが、表示させたい場合は、「 frameborder="1" 」に変更してください。

④全画面表示機能の設定
プレイヤーの右下に四角いボタンがありますが、このボタンを押すことで、掲載している動画を全画面表示で見ることができるようになります。その機能を使えるようにするか否かをallowfullscreenの有無で設定します。

つまり、自動挿入されたYouTubeの埋め込みコードでは、下記の設定がされています。
・プレイヤーを横幅320×高さ180で表示させなさい
・「https://www.youtube-nocookie.com/embed/6LQEu-HVE40」の動画を表示させなさい
・枠線はなし
・全画面表示の機能をONにしなさい

YouTubeの埋め込みコードをカスタマイズしてみる


YouTube動画のカスタマイズは、埋め込まれたコード内の動画URL(上記②参照)の後に「パラメータ」と呼ばれる動作を変更するための設定値を追加することで、YouTube動画に様々な設定をすることができます。また、動画URLとパラメータを識別させるため、パラメータは必ず「」から始まります。

①動画を自動再生する
「autoplay=1」というパラメータを追加することで、該当の記事が開かれた際にYouTube動画を自動再生することができます。


▼コードの内容
<iframe width="320" height="180" src="//www.youtube.com/embed/6LQEu-HVE40?autoplay=1" frameborder="0" allowfullscreen></iframe>

②動画下のコントロールバーを非表示にする
「controls=0」というパラメータを追加することで、YouTube動画下のコントロールバーを非表示にすることができます。
※再生ボタンをクリックして、動画上にカーソルを合わせてください。


▼コードの内容
<iframe width="320" height="180" src="//www.youtube.com/embed/6LQEu-HVE40?controls=0" frameborder="0" allowfullscreen></iframe>

③動画のタイトルを非表示にする
「showinfo=0」というパラメータを追加することで、YouTube動画のタイトルを非表示にすることができます。


▼コードの内容
<iframe width="320" height="180" src="//www.youtube.com/embed/6LQEu-HVE40?showinfo=0" frameborder="0" allowfullscreen></iframe>

④動画終了時の関連動画の表示設定
「rel=0」というパラメータを追加することで、動画が終了した際に表示される関連動画を非表示にすることができます。


▼コードの内容
<iframe width="320" height="180" src="//www.youtube.com/embed/6LQEu-HVE40?rel=0" frameborder="0" allowfullscreen></iframe>

⑤動画の再生開始位置を指定する
「start=XXX」というパラメータを追加することで、動画の再生開始位置を指定することができます。
XXXには秒数を記載してください。
※下記では30秒から再生を開始するように指定しています。


▼コードの内容
<iframe width="320" height="180" src="//www.youtube.com/embed/6LQEu-HVE40?start=30" frameborder="0" allowfullscreen></iframe>

⑥動画の再生終了位置を指定する
「end=XXX」というパラメータを追加することで、動画の再生終了位置を指定することができます。
XXXには秒数を記載してください。
※下記では30秒で再生を終了するように指定しています。


▼コードの内容
<iframe width="320" height="180" src="//www.youtube.com/embed/6LQEu-HVE40?end=30" frameborder="0" allowfullscreen></iframe>

YouTubeの埋め込みコードのカスタマイズ応用編


様々なパラメータをご紹介させていただきましたが、複数のパラメータを設置するには、パラメータとパラメータの間に「&」を入れます。


▼コードの内容
<iframe width="320" height="180" src="//www.youtube.com/embed/6LQEu-HVE40?controls=0&showinfo=0&rel=0&start=30&end=60" frameborder="0" allowfullscreen></iframe>

埋め込みコードをカスタマイズして、お気に入りのYouTube動画を自分好みの表示にアレンジしてみてください!



FC2サービスでは、お客様からのご要望やリクエストを募集しております。
もし宜しければ、FC2ブログに関するご意見・ご要望を
下記のページからご投稿いただけますと幸いです。

▼FC2リクエスト
https://request.fc2.com/



FC2ブログに関してご不明な点がある場合は、
下記の専用お問い合わせフォームより詳細を添えてお問い合わせをお願いいたします。

▼FC2ブログお問い合わせフォーム
https://form1ssl.fc2.com/form/?id=15028

関連記事

【公式】FC2ブログスタッフ

FC2ブログの使い方やおすすめブログのご紹介など、FC2ブログのスタッフによる公式ブログです🐤

月間500億越えのPV数を誇るFC2サービスを使いこなして、ブログで情報発信していこう♪

FC2ブログ 公式ちゃんねるの公式Twitterも、フォローよろしくお願いします!



皆様の応援を心よりお待ちしております👌

web拍手 by FC2

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

最新記事

スマートフォンでFC2ブログを利用してみよう!~【新管理画面】空白行を入力する方法~ 2024/04/18
FC2おすすめブログのご紹介♪『メキシコの南の小さな家から』 2024/04/11
画像サイズ上限を引き上げました! 2024/04/04
ブログへ投稿したコメントの編集方法 2024/03/21
FC2おすすめブログのご紹介♪『しろいねこ Vol.2』 2024/03/07

検索フォーム

公式ブロガー

FC2ブログの公式ブロガーとしてご活躍されているブロガー様のご紹介です♪