メディアの挿入-SIRIUS2の使い方

メディアの挿入-SIRIUS2の使い方

Youtube動画やGoogleMapの挿入についての詳細ページ。
 

アイキャッチ画像

記事装飾メニューの[メディア]内にはさまざまなメディアの簡単挿入機能が搭載されてます。


キャプチャ画像


動画

サイト内にご自身で用意した動画(.mp4)を挿入できます。


クリックすると専用の画面が立ち上がるので、保存しておいたmp4動画を指定します。


キャプチャ画像


『基本設定』で動画の表示横幅や表示位置が設定可能。
『埋め込みタグ』はよくわかりません。
『詳細設定』では再生/一時停止などのコントロールの表示/非表示、自動再生のON/OFFなどが調整可能。


編集画面上ではこちらのように自動入力されます。

<span class="fr-video"><video preload="metadata" src="<% pageDepth %>media/drone-rural_videoAC.mp4" style="width:100%;height:auto;" controls autoPictureInPicture></video></span>

ただし修正する場合は再度動画入力画面を出してもう一度最初からのやり直しというやり方しかできないようです。

Youtube

YouTubeの動画をサイト内に挿入できる機能です。


専用画面から表示させたいYoutube動画を選ぶだけの簡単操作。
表示サイズは自動的にレスポンシブ対応となるのでスマホでもレイアウト崩れが起きる心配はありません。


キャプチャ画像


エラーが出るとき

当記事のアップ時点ではこの機能を使ってyoutubeを設定してもエラー表示が出て再生不可になってしまいます。(Youtube側の仕様変更によるもの?)


キャプチャ画像


その場合はちょっと面倒ですが以下のやり方で回避はできます。


1.SIRIUS2が前述の操作で自動生成するHTMLコードのうち、先頭と最後尾の2ヵ所のコードのみを”借用”します。


テキスト「code」画像

<div class="gmap-wrap"><div class="gmap-box"> (ここを差し替え) </div></div>


2.埋め込みたいYoutubeをブラウザで開きます。


3.右下の「共有」をクリック→「埋め込む」をクリックします。


キャプチャ画像


4.コードを全選択→コピーします。


キャプチャ画像


5.(1.の)「ここを差し替え」の部分を削除→(コピーしたコードを)ペーストします。


これで正常に表示されるようになります。

Googleマップ

Googleマップをサイト内に挿入できる機能。
設定画面を開き、表示させたい地点を選択するだけで完了します。


目的地を検索

<Googleマップ>を開いたら記事内に表示させたい目的地を入力して検索します。



地図位置が問題なければ「挿入」をクリック


マップ表示用のコードが自動入力される


ブラウザでの表示