Webサイト系

サイトにYoutubeの動画をHTMLで埋め込む方法と注意したいこと

http://umenokinosita.xyz/geneisensou/

⇧⇧のサイトは私がこのブログの下部に作っている幻影戦争のためのサイトです。中身はYoutubeの置き場となっており、さまざまな配信者さまの動画を埋め込む形で載せています。埋め込むのはHTMLを触ったことがある人なら簡単なのですが、サイト制作をしない人には少々難しいかもしれません。例えば、<a href=””>動画</a>などのようなタグが理解できないと置けないしカスタムできないですが、難しさでいえば下から数えた方が速いと思います。今回は、HTMLを多少触る人向けにYoutube動画をHTMLで埋め込む方法と、注意したいことについて解説します。

Youtube動画の埋め込み方法

Youtubeを見たいときにページを開くと⇧のようなページになりますよね。この時、埋め込みたい動画の右下にある「共有」を開きます。

すると、どこに埋め込むかの選択ボタンが現れるので、Twitterとかに投稿したいときはそっちなんですが、自分の作るページに載せたい時は、この一番左の「埋め込む」ボタンを押します。

すると埋め込むためのHTMLに置く、iframeでくくられたタグが現れるのでこれをコピーします。

その後、自分のHTMLの<body>タグ内の任意の場所にペーストしてアップロードすればもうサイトに反映できます。この時、widthやheightなどをいじることで動画の大きさを変更できますし、その部分を消去してclassかidを付与してあげてCSS側で横幅などを指定することもできます。そのままだと動画は左上に寄せるように配置されてしまうと思いますので、例えばiframeを<p>タグでくくってあげて、<p>タグに<p align=”center”><iframe></iframe></p>というように「align=”center”」を付与してあげると中央寄りにすることができます。もちろんrightでもleftでもOKです。

Youtube動画を埋め込むときに注意したいこと

Youtubeに限らず、動画全般に言えることなのですが、ちょっと調べたところ、特にBGMに関しての著作権について勉強する必要がありそうです。BGMのついた動画をアップするときに、もしかしたら自分もBGMの使用許可を取らないといけない場合があるってことなんです。

著作権についてはこちらを参照

このページによれば、著作権とは、作った人に付与され、その制作物を第三者が利用することを制限できる権利、だそうです。楽曲の場合作詞者や作曲者がそれにあたります、とあります。

利用許諾が必要ないケースには、私的利用、営利目的じゃない、保護期間が切れた楽曲、などがあります。

利用許諾が必要なケースは、結婚披露宴、演奏利用、複製利用、店舗内BGM、Youtube等動画配信時の音楽、とあります。

違反した場合、損害賠償に至る恐れもあり、BGMの仕様は注意する必要があります。

これが動画を埋め込むときにもどうやら適用されるんじゃないかと思ったり……。

動画投稿(共有)サービスでの音楽利用

このJASRACのページで「はい、いいえ」で進んでいくと、配信する動画のBGMに許諾が必要なのかがわかるのですが、この場合は「動画投稿サービスでの音楽利用」とありますので、自分のサイトに埋め込んだときはそれ以外なのかもしれませんが、わかる方教えてください。わからないので、注意しましょうね、ということです。

私のサイトの場合、広告をまだつけていないので問題ナシにくくられると思いますが、慎重にならないといけません。Youtubeで動画を作る時は、基本的に著作権フリーの音楽が用意されていて、そこから利用すればいいそうです。勿論、使いたい楽曲があったら、個別に使用料を払って流すことは可能だそうです。

結論

怖いので、著作権侵害に関わるようなBGMを使用している配信者様の動画は埋め込まない。もし誰か著作権について詳しい人がいたら聞いてみる。Youtube配信者によってはどこかに所属して企業案件で配信している場合があり、そういう人のBGMには特に気をつけた方がいい。と思います。

私の幻影戦争の動画まとめは基本的に本人に許可をいただけた方のみ動画リンクを置かせてもらってますが、動画の内容を全てチェックしているわけではないので微妙に怖い部分もありますね。ただいつも拝見してる中で言えば、有名な楽曲とかを使っている人はいないので大丈夫だと思ってますが、もしこれやばいです!って教えてくれる方がいたら優しくご教示いただけると助かります。始めたばかりのサイトなので右も左もわかりません。もし削除した方がよければサイト閉じることも検討しますので、よろしくお願いします。

ではね、ちゃお☆

ピックアップ記事

  1. Round1figh!!

関連記事

  1. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART3 「タグ」

    今回はHTMLでつかうタグの一例をご紹介します。特にHTML5の5か…

  2. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART4 「タグ2」

    タグ紹介二回目です。一回目は特にHTML5準拠からのタグをご紹介しま…

  3. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART2

    HTMLという言語を使う時は、adobeが提供しているdreamwe…

  4. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART1

    このタイトルでは、私一花が今まで独学で築き上げてきた技術やコツをこれ…

  5. Webサイト系

    Webデザイン~検索データベースシステムが出来るまで~PART5 「タグ3」

    本日はモバプロ2ではなくWebデザインで使うタグ紹介part3です。…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Twitter

  1. ポーカー

    トランプポーカールーム「Roots」渋谷で始動
  2. モバプロ2レジェンド

    Legend Tigers2構築編~浪漫バックスクリーンアタック…~モバプロ2レ…
  3. モバプロ2レジェンド

    モバプロ2レジェンドの本家PV動画って見たことある?~モブキャストプレゼンツ~モ…
  4. モバプロ2レジェンド

    【スキマに届けっ!?—第九回は女性ユーザーどじょっこブロやん!!赤裸々に語ります…
  5. レッドストーン

    知識比率lv2グローブはどうやって作るの?~レア品製作を解説~レッドストーン
PAGE TOP