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

■手順�@・・・HTMLにYouTube動画のコードを貼りつける

 

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

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

 

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

 

シリウスのデフォルトタイプのテンプレートの2カラムでメインコンテンツにユーチューブの動画を貼る場合、横(width)620、縦(height)349、にしておきますと、横幅いっぱいちょうどに表示できます。

 

貼り付けましたら、埋め込みコードを次のタグで囲みます。

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

 

管理画面の最終的なYouTube動画の記述は下記のようになります。

 

もちろんPCの表示はwidth="620" height="349"で指示した大きさになります。2カラムのテンプレートで、動画を枠で囲まない場合、この大きさがちょうど良いです。
（当サイトの動画の大きさ）

 

 

■手順�A・・・「Iphoneサイトスタイルシート」を編集

 

 

 

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

 

►注意事項
下記ののコメントタグも記述する事！
/* スマホ動画最適化 */

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

 

 

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

 

 

■手順�B・・・コピペが完了しましたら、スタイルシートを保存します。

 

 

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

 

２、元のスタイルシートに戻す場合
スタイルシートがデフォルトに戻ります。今までスタイルシートに記述した内容が、すべてリセットされ、ソフトご購入時の状態になるって事です。

 

■手順�C・・・Iphoneサイト用のプレビューで確認します。

 

 

 

プレビューボタンの上で右クリックしますと、右画像のようにiphoneサイトのプレビューが表示されますので、クリックして下さい。

 

上記の画像のプレビューのように、画面幅いっぱいにYouTube動画が表示されていれば、正しく機能していることになります。

 

 

以上でHTMLにYouTube動画を貼りつける方法と、スマホ最適化のためのスタイルシートの設定が完了しました。作業が終わりましたら、実際にスマホやIphoneでサイトにアクセスして、正常に表示されるか確認して下さい。