YouTubeに動画サイトを作る（無料）ことで、文字情報では伝えきれないものを動きを加えて伝えることができます。
最近は、パソコンとスマホで比べると主流がスマホに代ってきました。ホームページが以前のままでパソコン用閲覧だけで作成されていたらYouTubeなどスマホで閲覧するとどのように表示されるでしょうか？

画面が途中で欠けてしまっているでしょう。
今回はYouTubeサイトからブログに動画を貼り付ける方法や、先ほどお話したようにカスタマイズし、パソコンサイトなら大きいサイズ・スマホなら自動的に表示を縮小させる設定をご紹介します。

YouTubeからソースをコピー

操作方法：

1. 貼り付けたいYouTube動画を表示し、動画のすぐ左下にある【共有】をクリックします。
2. 埋め込みコードが表示されます。この時【もっと見る】が表示されますのでクリックしておきましょう。するとプレビューや細かなカスタマイズが設定できる画面が表示されます。

• 動画のサイズを【▼】ボタンを押して任意のサイズに設定します。
• 動画が終わったら関連動画を表示するの✔をはずします。動画が終わった時に誰か別の動画が表示されてしまうのを防ぐためです。
• プレーヤーのコントールは動画の下部にコントロールを表示します。私はそのまま表示するようにしています。
• 動画のタイトル・・・表示する　も✔を入れておきます。
• プライバシー強化モードは✔を入れるとウェブサイトの訪問者が動画を再生しない限り、訪問者に関する情報は YouTube に保存されません。

以上のカスタマイズを✔したり外したりすると上にあるボックス内のソースが自動的に生成されていきます。作成されたソースをドラッグして範囲選択しコピーしましょう。

ソースの意味

<iframe width=”560″ height=”315″ src=” https://www.youtube.com/embed/D6Ac5JpCHmI?autoplay=1″ frameborder=”0″ allowfullscreen></iframe>

• widthは横のサイズを指定します。heightは縦のサイズを指定しています。
• ソースの合間には必ず半角の空白で区切っていきます。ダブルクォーテーションで数値などをくくるのも決まりごとです。
• 埋め込んだ動画が自動再生されるようにするには、動画の埋め込みコード内の動画 ID（「v/」の後に続く文字列）のすぐ後ろに「&autoplay=1」という文字列を追加します。自動再生による埋め込み動画の再生は、視聴回数としてカウントされません。
• frameborder：ビデオ全体の枠線を入れる場合は1　枠線がなしの場合は0です。
• allowfullscreen：動画再生の際にフルスクリーンにします。

動画の表示をページに合わせて自動的に調整させるコード

style="max-width:100%;"

表示させたいページに貼り付ける

貼り付けるページの記述のモードを「テキスト」にします。または「HTML」などの表示だと思います。

style="max-width:100%;"

↑このソースを<iframe　の後に半角を開けて挿入します。

結果を確認

結果を確認します。以下の画像はパソコンでの表示です。画面が広いので大きく表示していますね。

以下のものは画面を縮小した時のものです。わざとパソコンのウィンドウを狭くしてみました。スマホでもこんな感じの表示になります。YouTubeがきちんと収まっているのがわかりますね。クリックすれば、全画面になって動画が始まります。

おまけ

YouTubeの画面でカスタマイズの中に、自動縮小のコードがないので毎回は面倒な人はトップページに【付箋】を貼っておくとよいですよ。コピーして使います。Windowsの付箋は便利ですよね。スタイルシートにタグを入れたりする方法もあるようですが初心者には難しいですよね。

ツイート