TOP

iPhone モバイル画面にユーチューブ動画サイズを適合させる手順

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

 

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

 

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

 

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

 

 

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

 

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

 

 

では ユーチューブ動画の表示サイズを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確認はできるが スマホ画面では表示されない方式

 

以下に埋め込みコードはおいていますがスマホ画面では見えません
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>

 

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

 

スマホ モバイルに合わせる横サイズは 300PXがベストです
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 シリウスカスタマイズ

iPhone画面にユーチューブ動画表示サイズを適合する手順関連解説
iPhone機能を追加したなら手動作業も必要
シリウスサイトを設定画面でiPhone機能を追加することは簡単にできますが、それて終わりではありません 手動でいくつものスマホモバイル適合作業を行う必要があるのです
iPhone用テンプレート初期化
シリウスで以前よりiPhone用テンプレート同時公開しているサイトで モバイルユーザビリティの警告があるような場合 テンプレートに問題がある可能性があります
PC画面スマホモバイル自動切り替え要素指定方法
シリウスのPC画面とスマホモバイル画面で外部スクリプト等で自動サイズ変更とならないスライダー画像等サイト内に置くサイズのある要素は自動切り替えに指定し適合するようカスタマイズします
iPhoneサイト背景カラーをカスタマイズ
SIRIUS シリウスiPhoneサイトの背景カラーを意味深なカラーにカスタマイズしてみるとまた違ったイメージを打ち出せるかもしれません?
iPhone機能 モバイル表示画面を確認する
シリウスをiPhone同時公開に指定する際 モバイル画面では どのように表示されるかを確認しながら構築してゆくことが出来ます
スマホとPC画面を分離適合サイズで読み易く表示する方法
シリウスサイトのスマホサイトとPCサイトでの表示内容をモニタリングサイズに適合した読みやすい構成に分離表示する方法のご案内です
スマホサイト フォントサイズを簡単カスタマイズする方法
SIRIUS シリウスのiPhone機能 デフォルトフォントサイズは スマホサイトの構成により 小さすぎて読みずらい場合もありますが 読みやすくカスタマイズ変更するこは簡単にできます