サイト作成ソフトシリウスでYouTube動画を最適化させる方法

サイト作成ソフトシリウスでYouTube動画をスマホに最適化

YouTube動画スマホに最適化

ここでの解説はレスポンシブWebを利用されてない方の設定になります

現在GoogleはレスポンシブWebを推奨しています

サイトオプションから「IPhoneサイト設定」「IPhoneサイトを同時生成する」にチェックを入れている方のみの操作です。レスポンシブWebでサイト生成されている方はこのコンテンツを飛ばしてください。

※ シリウス2も同様です。

レスポンシブWebではなく、PCサイ生成と携帯サイト生成でコンテンツを出し分ける場合でYouTube動画をスマホに最適化させる方法を試してみましたが、訪問者さんの使い勝手を考えた場合、一番良いと思った方法をご紹介します。

当時私は今回解説している設定でしたが、現在はシリウス2でレスポンシブWebを使っています。

スタイルシートの編集は「Iphoneサイトスタイルシート」で作業しますので、お間違えのないようにお願いします。この設定は、Iphone [スマホ] サイトのみに変更を命令するという事です。

ver15から「Youtube、Googleマップのタグ」というコマンドが追加されています

YouTube動画はこのコマンドで携帯端末表示に最適化で対応する事ができます。

※下記動画の方法でも正常に動きます。

[この動画は9分です]

Please click

チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。

携帯サイトをPCと出し分けしている場合のYouTube動画最適化の方法

HTMLにYouTube動画のコードを貼りつける

YouTube動画の埋め込みコードをコピーすると下記のようなソースを取得します。
動画の上で、右クリックで「埋め込みコード」をクリックして下さい。

YouTubeでのURLは、https://youtu.be/NJZRiqXyaYMになります。

この記述方法を「インラインフレーム」といい、ソースで指定したコンテンツを、画面中にインラインで表示するためのタグです。まずこのコードを取得し、PCで表示させたい場所に貼り付けます。

シリウスのデフォルトタイプのテンプレートの2カラムの場合

メインコンテンツに動画を貼る場合、横(width)620、縦(height)349、で横幅いっぱいに表示できます。

埋め込みコードを次のタグで囲みます

<div class="movieinfo">埋め込みコード</div>

※ 頻繁に動画を埋め込むホームページでしたら文字装飾設定しておく事をお勧めします。

作成画面の最終的なYouTube動画の記述は下記のようになります

もちろんPCの表示はwidth="620" height="349"で指示した大きさになります。2カラムのテンプレートで、動画を枠で囲まない場合、この大きさがちょうど良いです。当サイトの動画はメインコンテンツの横幅をサイズアップし、またレスポンシブWebで出力しているため今回の解説とは横幅が多少異なります。

「Iphoneサイトスタイルシート」を編集

「テンプレート」から「Iphoneサイトスタイルシート」を開いて頂けましたら、一番下までスクロールし、右記画像のように下記黄色枠内のソースを記述します。

注意事項・・・下記のコメントタグも記述する事！

/* スマホ動画最適化 */

上記画像594行目の　}　があるか確認する。コピーミスが一番多い！

/* スマホ動画最適化 */

.movieinfo {
position: relative;
padding-top: 56.25%;
padding-bottom:30px;
}
.movieinfo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

※ くれぐれも完全にすべてコピーしてお使い下さい

コピペが完了しましたら、スタイルシートを保存します

１・・スタイルシートを保存します
保存ボタンを押す事で、このスタイルシートに記述された内容がHTMLに反映されます。

２・・元のスタイルシートに戻す場合
スタイルシートがデフォルトに戻ります。今までスタイルシートに記述した内容がすべてリセットされます。

Iphoneサイト用のプレビューで確認します

プレビューボタンの上で右クリッして「iphoneサイトのプレビュー」をクリック

下記の画像のプレビューのように、画面幅いっぱいにYouTube動画が表示されていれば、正しく機能していることになります。以上でHTMLにYouTube動画を貼りつける方法と、スマホ最適化のためのスタイルシートの設定が完了しました。作業が終わりましたら、実際にスマホやIphoneでサイトにアクセスして、正常に表示されるか確認して下さい。