動画、Telegram の投稿やその他のメディアをマーカーのポップアップに追加する
動画、音声クリップ、対応しているソーシャルメディアの投稿をマーカーのポップアップに埋め込むことができます。閲覧者はポップアップ内でメディアを再生できます。
埋め込みコードを追加する
- 上部のツールバーで編集/計測ツールを選択します。
Quick Key: または、キーボードの「Q」ボタンを押すこともできます。
- マーカーをクリックします。編集ウィンドウが開きます。
- 高度な編集をクリックします。
- 説明ボックスの上部にあるHTMLをクリックします。
- 動画サイトから埋め込みコードを貼り付けます。ほとんどのサイトには、このコードを取得できるEmbedオプション付きの共有ボタンがあります。
- 保存をクリックします。
結果を確認するには、ハンドツールを選択し、マーカーをクリックします。ポップアップ内にプレーヤーが表示されます。
編集中にビジュアルに戻すと、動画は [[Embed url="..."]] のように角括弧で囲まれたショートコードとして表示されます。保存するとショートコードはプレーヤーに戻ります。
埋め込み可能なサイト
以下のサイトの埋め込みコードはポップアップ内で再生されます。
- 動画: YouTube(youtube-nocookie.com を含む)、Vimeo、TikTok、Instagram、Facebook 動画、Twitch、Dailymotion、Loom、Wistia、Streamable、Rumble、Internet Archive。
- Telegram: 公開チャンネルの投稿。
- 音声: Spotify、SoundCloud、Bandcamp。
- その他: Google Docs、Google Drive のファイルプレビュー、Google マップの埋め込み、Matterport ツアー、ウェブに公開された Power BI レポート、Scribble Maps の地図。
注記: 上記以外のサイトからの埋め込みコードは、保存時に削除されます。この制限は埋め込みコンテンツのセキュリティを保護するためのものです。これは、あなた自身のウェブサイト上の動画プレーヤーにも適用されます。自分でホストしている動画を表示するには、動画ファイルに直接リンクしてください(下記参照)。
ポップアップ内でも各サイト独自のルールは引き続き適用されます。例えば、非公開または削除された投稿の場合、そのサイトの「見つかりません」メッセージが表示されます。
Telegram の投稿
以下のいずれかの種類のコードを使用できます。
- Telegram 自体の投稿メニューからのEmbedコード(
<scriptで始まり、data-telegram-postを含みます)。Scribble Maps がこれをプレーヤーに変換します。 - 以下のように、投稿へのリンクをフレームで指定する方法:
<iframe src="https://t.me/channelname/1234?embed=1" width="400" height="500"></iframe>
公開チャンネルの投稿のみ表示できます。非公開グループや非公開チャンネルの投稿は埋め込めません。
動画ファイルを直接再生する
動画ファイルへの直接リンクがある場合(.mp4 または .webm で終わり、https で始まるもの)、HTML内に以下を貼り付けます。
<video src="https://example.com/my-video.mp4" width="400"></video>
音声ファイルの場合は、<audio src="https://example.com/my-sound.mp3"></audio>を使用します。
再生・音量コントロールは常に追加されるため、閲覧者はクリップを一時停止できます。動画や音声が自動的に開始されることはありません。
プレーヤーのサイズを調整する
コード内の width と height の数値を変更すると、プレーヤーを大きく、または小さくできます。Telegram 自体の Embed コードは、幅400、高さ500のプレーヤーになります。変換後にこれらの数値を変更できます。
関連項目
最終更新