北上研究所

2023年10月29日　埋め込みテスト

Kitakami Yuma Project.のyumaです。

ホームページにおける「埋め込み」って知ってますか？
ホームページにおける「埋め込み」とはホームページに外部のコンテンツを表示させることを言います。

主に画像や動画が広義の「埋め込み」にあたります。
陰謀論みたいなチップではありませんよ(笑)
今回はその中でも外部ページの埋め込みに焦点を当てていきたいと思います。

まず外部のホームページの埋め込みってなんやねんってところですが、実はインターネットの大半の人が見たor使っているはずです。
例えばブログやホームページにあるYouTubeの動画だったりホームページ内に公式のツイートが表示されてたりなど、こういうのがホームページの埋め込みにあたります。
このページの左側にあるメニューもメニュー単体のホームページの埋め込みです。

今回はそんな埋め込みできるサイトをまとめてみました。
YouTubeやTwitterといったよく見かけるものから、普段はあまり見かけないものまで集めてみました。
まあ個人的に実験してみたかったのでこの場所を使ってやってるだけなんですがね。

YouTube

デフォルト

開始時間の指定

コントロールバーを非表示

プライバシー強化モード

YouTubeはよく見かけますね。
ホームページ共有のところにある埋め込みを見たことあるかもしれません。
あれをホームページにコピペするとこのような物が作れます。

開始時間の指定やバーの非表示などが可能でプライバシー強化モードがあります。
デフォルトのサイズは560×315です。

Twitter

単体のツイート

「かるみあどーるず/北上ゆま(cover)」

電子の世界からこんにちは、北上ゆまです！
とりぴよ様の素敵な曲を歌ってみました！
例え まやかしだと 言われても
ではしたっけ！

youtubehttps://t.co/7q4DyfJlL5
niconicohttps://t.co/sM6FTIsWQ4#Vtuber #拡散希望 #おはようVtuber pic.twitter.com/O0kuuYHJaZ

— 北上ゆま❄️☄️@男の娘AIVtuber (@Kitakami_Yuma_) December 24, 2022

複数のツイート

フォローボタン

メンションボタン

Twitterの埋め込みは4種類存在します。
YouTubeと異なり埋め込みよりはTwitterを表示するソースをコピペする機能って言ったほうが正しいでしょうか。

ツイートを表示するためのソースコードとそれをTwitterの形にするjsが同封されてます。Twitterの埋め込みはTwitter Publishにて作成することができます。

ニコニコ動画

動画の埋め込み

動画の埋め込み(開始時間指定)

動画情報とサムネイル

ニコニコ静画

ニコニコ生放送

ニコニコ立体

ニコニコQ

ニコニコは各種サービスの埋め込みリンクを作ることができます。
動画のサイズは埋め込みのコードを変更することで変えることができます。

動画のサムネは大百科でよく見かけると思います。
ニコニコQのみTwitterと同じくiframeが使われていません。

Scratch

少しマイナーですが子供向けの簡易的なプログラミング言語であるScratchも埋め込みが可能です。
今回はScratch2.0の頃に作成したプログラムを持ってきました。
今見るとかなり拙いですね(笑)

というわけで埋め込みはいかかでしたか？
とりあえず適当に知っているものを中心にやってみました。
Twitterの埋め込みはもしかしたら表ページで使うかもしれないのでその練習に。