シリウスをiPhone画面でもスマホ対応として表示指定した際

 

ユーチューブ動画のサイズも正常なスマホ対応として認識できるよう
自動調整の指定をして正常反映としましょう

 

ＰＣにユーチューブ動画を置いているサイトの場合のみの対応で

 

ＰＣ画面では通常の指定サイズで表示されます
スマホ　モバイル画面では　サイズが調整され小さくなります

 

 

ＰＣでの表示は　指定せずそのままですと　スマホ画面で表示される
範囲は半分かそれ以下になります

 

未対応の場合は　動画サイズが自動調整されないので
未対応表示となるのです

 

 

では　ユーチューブ動画の表示サイズをiPhone指定とする手順の
ご案内へ進みます

 

スポンサーリンク

 

 

スマホ画面サイズにユーチューブ動画の表示サイズを指定する

 

対処法は動画がスマホ画面内で調度に収まるようスタイルシートで
指定します

 

以下　動画の埋め込みコードです
iframeの箇所で動画と指定してますので
<iframe width="420" height="315" src="http://www.youtube.com/embed/AUZIplf0Xg0?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

 

以下記述に要素を含め記述します

 

 

以下記述を　iPhoneのスタイルシートのどこかに張り付ければ終了します

 

ここから
iframe {
position: relative;
top: 0;
left: 0;
width: 100%;
}
ここまで

 

iPhoneのスタイルシートは　どこかって？

 

iPhoneのスタイルシートは　PC用の編集画面から進むのではなく

 

操作画面最上部の　テンプレート選択

 

次のプルダウンメニューから
iPhoneサイトスタイルシート編集で到達できます

 

---

 

もう一つのコードがあります

 

お試し程度に？

 

iframe {
max-width: 100%; !important;
}

 

上記手法は　iPhoneスタイルシートで自動でサイズ調整されます

 

 

以上の指定方法は　シリウス公式サイトで公開されている手法では
ございませんが　正常な表示確認はモバイルサイトでご確認いただけます

 

以下は　投稿者のコンテンツによりサイトで動画としては表示はされない
初期画面のみ表されるユーチューブ動画ですが　モバイルサイトで
ご確認いただければ以下のサイズで表示されます

 

 

 

---

 

シリウス公式サイトでの説明も追加しておきます

 

公式サイトでご案内されている説明では　ＰＣで表示されるもの

 

モバイルで表示されるものを　サイト内に同時記述します

 

 

以下の動画は　PC確認はできるが　スマホ画面では表示されない方式

 

以下に埋め込みコードはおいていますがスマホ画面では見えません
PCでは見えます

 

ここにあります

 

 

ＰＣ用コード

 

<pcc>指定で記述を囲むのですね

 

</pcc>

 

 

<pcc>
ユーチューブコード
</pcc>

 

<pcc>
<iframe width="420" height="315" src="https://www.youtube.com/embed/PjbE0UvGAo4?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
</pcc>

 

 

スマホ用コード
ここに置いてますが　スマホ用なのでPC画面では見えません？
スマホ画面　ソースでは確認できます

 

ここにあります

 

スマホ用指定は
<ipc>で囲みます

 

</ipc>

 

スマホでのみ認識できるのですね

 

スマホ　モバイルに合わせる横サイズは　３００PXがベストです
width=300が指定箇所です

 

 

<ipc>
<iframe width="300" height="200" src="https://www.youtube.com/embed/PjbE0UvGAo4?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
</ipc>

 

 

表示される　されないの説明がややこしくてすみません

 

どちらかの閲覧状況で　見える　見えないがあるのですね

 

 

記述指定の横サイズは300程がベストです

 

 

---

 

iPhone画面にユーチューブ動画表示サイズを適合する手順 P-TOP
SIRIUS iPhone機能　シリウスモバイル対応カスタマイズ P-TOP
SIRIUS　シリウスカスタマイズ