SNSのタグ埋め込み

職業訓練校
2025.06.03

SNSの埋め込み

  1. 該当のポストのURLをコピー。
  2. https://publish.x.com/に移動。
  3. 埋め込みたいタイムラインのリンクを入力します。
  4. 「Embedded Post」を選択してURLをコピー。
  5. divタグで挟んで、ポストを表示する。

Google mapの埋め込み

  1. Googlemapを開く。
  2. 該当の場所を検索。
  3. 共有＞地図を埋め込むをクリック。
  4. サイズを選択してHTMLをコピー。（サイズは自分でwidth指定する事も可能。）
  5. divタグで挟んで、地図を表示する。

動画の埋め込み

WEBサイトに動画を埋め込む方法は2つ。

  1. iframeタグを使用する（youtubeなどの動画サイトから読み込む）
  2. videoタグを使用する（動画ファイルをアップロードして読み込む）

IFRAMEタグ

YOUTUBEなどの動画サイトから読み込む。

動画を開く＞共有＞タグ＞動画の埋め込み＞IFRAMEタグをコピー
※再生できませんという文言が出る場合、動画のオーナーが外部の埋め込みをオフにしている。

記述例
<iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

レスポンシブ対応する

例）aspect-ratioを使用した方法。
widthは属性(＝element)だから、Styles＞element.Styleを編集する。
※aspect-ratio＝アスペクト比

VIDEOタグ

動画ファイルをアップロードして読み込む。

記述例
<video src="sample.mp4"></video>