ホームページ作成ソフトシリウス|You Tubeの設置方法

シリウスで作ったサイトにYou Tubeを設置する方法

こんな感じでシリウスで作ったサイトにYouTubeの動画を埋め込む方法を解説します。

言っときますけど超簡単です(笑)

You Tube動画埋め込み手順

埋め込みたいYouTubeの動画サイトに移動します。

You Tubeの動画サイト

埋め込みコードをコピーする

動画のチョイ下に「追加」「共有」「その他」という項目がありますので共有を選びます。
今度は、共有、埋め込みコード、メールという項目が出てきますので埋め込みコードを選びます。
出てきたコードをコピーします。

記事本文に貼り付ける

コピーした埋め込みコードをシリウスの記事本文に貼り付けます。

文法が気になる方は修正します

私のように細かい方は以下の部分を消去、加筆して終了です。

修正前

修正箇所

<iframe width="560" height="315" src="https://www.youtube.com/embed/-zQWavER7to" ここに title="タイトル名"  frameborder="0" allowfullscreen(消す)></iframe>

※シリウスで使われている文法では動画にtitleを記入する必要があります。また、allowfullscreenというhtmlは使えません(あくまで文法違反というだけの話です、allowfullscreenの動画をフルスクリーンで再生する機能は利用できます。多分)

修正後(必ず↓追記をお読みください)

<iframe width="560" height="315" src="https://www.youtube.com/embed/-zQWavER7to" title="「海の声」浦島太郎" frameborder="0"></iframe>

追記

アップロード翌日にスマホでページを確認したら動画が画面に収まっていませんでした。

画像と同じように勝手に縮小されると思っていたのでびっくりです(◎o◎)

会社のサイトでもYou Tubeの動画を設置していたのですが、そちらは正常に動作していたはず。

と思って調べてみましたが、会社のサイトではPCサイトとスマホサイトを別管理している為、スマホサイトの方ではスマホに合わせてwidthとheightを設定していました。

CSSを調べましたがどうやらシリウスでは<iframe>関連のCSSは書いていないようでしたので、CSSを付け足し、You Tubeの埋め込みタグをdivタグで囲う必要があります。

ネットで調べたら下記のサイト様にて解決策が載っていましたのでご紹介させていただきます。

シリウスの賢い使い方

以下CSSコード引用(クラス名のみ変更)

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

You Tube 動画設置方法-改訂版

Step1
シリウス記事編集画面より
編集→スタイルシート→style.cssを選択
style.css の一番下に上記コードを貼り付ける。
Step2
You Tubeの埋め込みタグを以下のdivタグで囲う。

開始タグ:
<div class="youtube">
終了タグ:
</div>
設置例-コード
<div class="youtube"><iframe width="560" height="315" src="https://www.youtube.com/embed/-zQWavER7to" title="「海の声」浦島太郎" frameborder="0"></iframe></div>