• MENU●●●●
  • iPhone画面にユーチューブ動画表示サイズを適合する手順


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    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機能 デフォルトフォントサイズは スマホサイトの構成により 小さすぎて読みずらい場合もありますが 読みやすくカスタマイズ変更するこは簡単にできます

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト