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デザイン~検索データベースシステムが出来るまで~PART5 「タグ3」

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

  2. Webサイト系

    鬼滅の刃 血風剣戟ロワイアル~攻略wikiの究極データベースを運営予定~

    こんにちは一花です。メインPCのディスプレイがスリープから解…

  3. Webサイト系

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

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

  4. Webサイト系

    バリスタの、バリスタによる、缶コーヒー飲み比べ.comのお引越し

    タイトルのサイトを置いていた無料のサーバーがサービス終了ということで…

  5. Webサイト系

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

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

  6. Webサイト系

    最近の近況報告~イコール生存報告?~

    しばらくこのブログの投稿をしませんでした一花です。頭の片隅には常にあ…

コメント

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

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

Twitter

  1. レッドストーン

    復帰一発ストールチャレンジ~確率は25%?~レッドストーン
  2. モバプロ2レジェンド

    各種バランス調整を確認~変更点と変更されていない点~モバプロ2レジェンド
  3. モバプロ2レジェンド

    LP10%UR90%ガチャ~これでもシブイか検証してみる~モバプロ2レジェンド
  4. ポーカー

    好きな数字「6」~6割フェチ~
  5. モバプロ2レジェンド

    新稲葉の牽引力!!~トレード不可なので気をつけよう!~モバプロ2レジェンド
PAGE TOP