投稿テクニック▼SNSでシェアするTwitterFacebookGoogle+はてブPocketLINEこのページのタイトルとURLをコピーYouTubeで動画をアップロードしたり、お気に入りの動画を紹介したい時に、ブログやサイトに動画を貼り付けたりしてシェアする人は多いよね!これを「動画をサイトに埋め込む」というんだけど、この埋め込みにはhtmlタグ(埋め込みコード)が使われている。色んな埋め込み方を設定できて便利なんだよ。そこで今回は、動画を埋め込むときによく使われるhtmlタグの設定を紹介していこう。動画がサイト画面に表示されてから再生したい再生スタート位置や再生ストップ位置を指定する指定の区間を自動でリピート再生させたい編集後記YouTubeの埋め込みhtmlを表示させようまずは埋め込みコードを表示することが第一歩だね。埋め込みhtmlコードはココで表示するんだ。1:YouTubeの再生ページでチャンネル名の下にある共有をクリック。2:すると下に表示が現れるから、その中から埋め込みコードをクリックすると、枠の中にhtmlタグが出ていると思う。これが、YouTube動画を埋め込むためのhtmlコードだ。そのhtmlコードを使って色々な事にチャレンジしよう!表示サイズ変更方法せっかく動画を貼り付けても、ブログやサイトのサイズに合わずに端が切れていたり大きすぎて表示ができなかったりしたら意味が無い。そこでサイズの変更をしよう!先ほどの要領で埋め込みhtmlコードを表示させると、その下にもっと見るという文字があるから、そこをクリックすると、動画のサイズが出てくる欄があるよね!ここから好きなサイズを選択しよう。カスタムサイズでは好きな数値を入れることができる。最近の動画は16:9の比率が多いから、なるべくその比率を保つことをオススメするよ。ちなみに、埋め込み先で後から数値だけ修正したい時には、ここの数字を変更させるといいんだ。通常は再生開始のボタンをクリックしない限り動画は再生されない。自動再生できた方がいいよね!それには、自動再生のタグ「autoplay=1」を動画URLの最後に手動で追加するんだ。先ほどの埋め込みコードの赤線の部分が、動画のURLだよ。加えればOKだ!もし、他のタグを既に加えていた場合は、?を&に変えて追加していこう。今はブログやサイトなどはスマホ、PC、タブレットなど様々なデバイスで見ることが出来るように作られているよね!それは、レスポンシブという、それぞれのデバイスに合わせたサイズで表示やレイアウトできるように作られているからだ。YouTube動画を埋め込んで、先ほどのようにサイズ変更するのもレイアウト的に必要だけど、デバイスに合わせた適切なサイズで表示させたい場合はレスポンシブ対応させるんだ。方法は、ブログやサイトのhtmlと、CSSに手を加えていくよ。class=”video”〉〈/div〉で囲むんだ。height=”315′′を削除する。CSSには、iframeとdivそれぞれをスタイル指定するんだ。こんな風にね!これで、PCでも、スマホでもタブレットでも、それぞれの端末に合わせたサイズで動画が表示されるよ。音声が聞こえて来て迷惑だと思う事が多いんだよね。複雑なことが全く分からない...という人はとりあえずはコピペして使う事をおススメするよ。APIを使って設定していくよ。1:YouTube動画を埋め込みたい部分に以下の内容を書きこむんだ。2:緑色で囲った動画サイズとYouTube動画のURLとなるIDを書き換える。IDはYouTubeページに表示されているコードのembed/の後の部分だ。(YouTube再生ページのアドレスバーのwatch?v=の後ろの部分でもあるね!)これをコピペしたい場合は、以下のページを参照するといいよ。埋め込んだYouTubeでFacebookみたいな動画自動再生を実装した話。枠線をつけるorつけない設定YouTube動画を埋め込んだときに、枠線を付けるかつけないかを設定できる。埋め込みコードをもう一度見てみよう。この中のframeborderという部分だ!・frameborder=”0′′・・・(周囲に枠線をつけない)・frameborder=”1′′・・・(周囲に枠線をつける)という設定になるよ。「1」にするとプレイヤーの外周に1pxの枠線が表示されるっていうことだ。動画がサイト画面に表示されてから再生したい動画の埋め込みは、必ずしもアクセスした最初の位置に貼るとは限らないよね!ページをスクロールしなきゃ、動画を貼り付けてあるところにたどり着かないことは多いと思うんだ。そんな時に、画面をスクロールして動画が現れてから自動再生させるコードが便利だ!実はこのコードは、先ほどのミュート(音量ゼロ)に設定するためのコードに既に書き込まれている。一度コードを見てみよう。ページの下の方にスクロールイベントという部分があるよね?ここからの部分がそうだ。このコードをいれておけば、スクロールされないうちに動画再生が終わっていた...なんてことを防ぐことが出来るよ。再生スタート位置や再生ストップ位置を指定する動画を作成する時に切り取って編集すればいいんだけど、そんな時間が無い時や、埋め込むサイトやブログの内容に合わせて動画再生を指定したい時もあるね。以下の文字を追加しておこう!指定したところからの再生→?start=40指定したところで再生停止→?end=12040とか120という数値は、秒数だ。1分40秒あたりを指定する場合は”100”ということになる。先ほど埋め込みコードに追加したスタート、終了指定の組み合わせと考えたらいいんだ。この場合は、20秒から30秒までの区間をリピート再生するという設定になる。このように、複数のパラメーターをいくつも設定するには、&で追加していけばいいんだ。編集後記どうだったかな?概ね、YouTube動画を埋め込む時に設定したい事柄についてをざっと解説してみた。詳細に色々と設定できるのが埋め込みコードの良いところなんだけど、ちょっとした文字を入れる、入れないとか半角になっていない、とか、タグがとじられていない...とか。そんなことで全く機能しなくなってしまうのがhtmlタグというものだ。不慣れな人はとりあえずYouTubeの再生ページにある設定をいじる事から始めよう。埋め込み※この記事の情報は2015年8月16日時点のものです。最新の情報とは異なる場合がありますのでご了承ください。情報の間違い等がありましたら、コメントで指摘していただけると助かります。date*日本語が含まれない投稿は無視されますのでご注意ください。コメントデータの処理方法の詳細はこちらをご覧ください。2015よぅつべえのYoutube。