HTMLとCSS

6回目 「Youtubeの埋め込みとカスタマイズ」

動画を入れてみたい!

「HP作ってみたけど、なにか物足りないな。そういえば、この前投稿した動画を紹介したいな。」
と、思って動画を埋め込みたいが初心者がわかるはずもなく…。
(筆者はそもそも埋め込む自分の動画がない)
今回は動画の埋め込み方とカスタマイズを紹介していきます。
前回に引き続き、本格的な紹介が続きますが宜しくおねがいします。

動画の埋め込み方

一口に動画と言っても色々な動画サイトがあります。
筆者は主にYouTubeとニコニコ動画を利用していますが、今回はYouTubeを埋め込むことにします。

手順を説明いたします。

1…埋め込みたい動画を開く

2…動画チャンネルの近くにある「共有」をクリック

3…「埋め込む」というものが出てくるので、そこをクリック

4…<iframe~といったHTMLコードが出てくるので取得する

5…取得したコードを埋め込みたいページのテキストに貼り付ける


これだけでOKです。意外と簡単です。
今回は著作権フリーの動画を使用させていただきました。投稿者様ありがとうございます。
でも人によっては貼っつけて、埋めてみた映像がページに対して「なんかでかい!」や「ちっさ!!」とか思う人もいるでしょう。
また「動画の開始位置をずらしたい」、「関連動画を表示させたくない」と思う人もいるとは思います。
そんな方のために次はカスタマイズ法を紹介します。

動画をカスタマイズする

動画をカスタマイズするからには手打ちでコードをある程度いじらなければいけないのですが、実はコードを取得するときにある程度はカスタマイズできるようにはなっています。ありがとう、YouTube!

「埋め込む」をクリックした時、HTMLコードの下にチェック欄が出てきます。
このチェック欄にある箇所は選択したり、しなかったりでHTMLコードが自動で書き変わります。

2018年4月現在、筆者が確認できる操作欄は以下の通りです。

  • 開始位置
  • 関連動画の表示
  • コントロールの表示
  • タイトルと操作の表示
  • プライバシーモードの有効化
  • 主に動画内の操作関連のカスタマイズです。
    コードの中にある要素を掻い摘んで説明します。

    width=”560″
    height=”315″ …動画の縦と横幅。ここで動画の大きさを変えることが可能ですが、比率を間違えると動画は悲惨になります。

    src=”https://www.youtube.com/embed/ …表示する動画。

    start=
    end=  …動画開始時間と終わり時間(停止時間)の調整が出来ます。

    loop= …動画をループさせたりさせなかったり出来ます。

    frameborder= …枠線の表示について

    といったコードで構成されています。
    では動画のディスプレイ自体の調整は??となると、HTMLコード内のwidthとheightでもいいと思います。
    ただ比率を間違えると悲惨です。比率や動画の見える幅を気にしないというのであれば、どんどんいじりましょう。
    他にもCSSで調整する方法あるいは、動画専用のプラグイン(拡張機能のことです)を使うのも有りだと思います。
    プラグインについてはいつか紹介しようと思います。

    今回はここまでとなります。
    ご覧いただきありがとうございました


    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


    上の計算式の答えを入力してください

    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)