ランキングタグって実はYouTube動画を埋め込めるんだよ！【Windows, Andoroid限定】

作者：頭のおかしい遊び人

はーい、どーも皆さんこんにちは！夕月です。

今回はランキングタグにYouTube動画を埋め込んでみたということで投稿してみました。

とりあえず一回ランキングタグのあるところまでスクロールしましょう。話はそれからです。

そのあと戻ってきてね。

↓　□□□□　確認中…

↓　■□□□　確認中……

↓　■■□□　確認中………

↓　■■■□　確認中…………

はい、いかがでした。

みえない？　あぁそれは残念です。確認してみたところ埋め込めるタグの制限的にfirefoxとiOS系, macOSは見れない可能性が高いです。

WindowsでGoogle Chromeやedge、androidのGoogle Chromeでは見ることができるみたいです。もちろんブラウザのアップデートで見ることができるようになったりならなかったりするかもしれません。

見えなかった方は残念ですが、見えた方にどうやって使っているのか説明しましょう。

どうやってるかですが、objectタグを使って実現しています。

こんな感じですね。

分解すると

...

</object>

って感じでobjectタグの中にパラメータを仕込む構造になってます。

ホントはobjectにdataを仕込む必要があるんですが、なろうだと消されるのでparamで仕込むしかないです。

firefoxやsafariだとobjectのdataからソースを参照するので使えなくなります。

で、YouTube動画を埋め込むには

param name="src" value="https://www.youtube.com/embed/<youtube動画のID>"

を入れるだけです。今回の場合、xVusoXsEvk0、がIDですね。

IDはYouTube動画の元のURLを見てwatch?v=xVusoXsEvk0とかついてると思うので、そのv=の先がIDになります。

それをランキングタグに入れると表示されます。

ちなみに、max-width:560px;width:100%;height:315px;を指定しているのはPC版では560pxで表示され、スマホとかのデバイスだと横幅で表示されるようにしたいからです。PCとかだとちょっと大きめに表示させたいのでそうしてます。

まぁこの辺りのスタイルはお好きなようにしていただければと思います。特に指定しなくてもいいかも。

*** 注意点！ ***

埋め込むのはいいのですが、ランキングタグには禁止事項があって、

”アフィリエイトなど、バナーの表示やクリックで収益が発生するタグの設置は規約違反となります。”

なので視聴回数によるインセンティブを狙っている動画は埋め込むと規約違反になりますね。そこは注意しておいてね。

**** - ***

iOS系、firefoxは今のところ表示されないのであんまり使えないかもですね。

読み込みも重くなるのであんまり歓迎されないかもです。

なんだろ、読み上げとかイメージＢＧＭを埋め込むのがいいのかなぁとか思ったり。

他にもObjectタグを使った埋め込みは可能ですが、なろうの規約的にちょいと厳しいものが多いので今回はYouTube動画を埋め込んでみただけにしておきます。

はい、ということでいかがだったでしょうか。

面白いと感じたらチャンね……、感想コメントを送っていただくか、☆☆☆☆☆をポチポチっと★★★★★にしていただけると嬉しいです☆

それではまた、次の動……作品でお会いしましょう。バイバイ！またね！