• MENU●●●●
  • シリウスで表現するYouTube動画のパラメータカスタマイズ


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

    スポンサー広告

    関連記事


    ユーチューブ動画をカスタマイズしましょう

    YouTube動画をサイトやブログには埋め込みコードを所得して貼り付ければ
    簡単に配置できますね

     

    ですが そのままのスタイルではなくカスタムすることで
    サイトイメージにに合わせる事もできるのです

     

    そんなカスタム事例をご参考ください

     

     

    ご注意ごと

     

    ボリューム調整や 消音とかのサウンド関連に際しては
    パラメータで指定できません

     

     

     

    通常動画から取り出す埋め込みコードは以下の記述です
    <iframe width="420" height="315" src="//www.youtube.com/embed/lH4lc2JWDNM" frameborder="0" allowfullscreen></iframe>

     

    全てのコピー記述に lH4lc2JWDNM とありますが
    ユーチューブの動画を個別指定するためのIDです
    好みの動画IDに変えられてください

     

    記述コードは途中折れしていますが シリウスの操作画面に貼り付けますと
    一列化します

     

     

    通常の動画ですが 自己主張?またはイメージ戦略のために
    見た目や操作モードのカスタマイズができるようパラメータで指定できます

     

    ここで最初にお詫びいたします

     

    あれこれとカスタムしていると記載の順位がランダムになってしまい
    関連事の順位構成になっていません
    又パラメータ指定の種類は数多くすべてを記載するには
    多少時間をいただきたく願います
    不足情報は 後程順次手順は追記してまいります

     

     

     

    パラメータは以下の位置に配置します

     

    <iframe width="420" height="315" src="//www.youtube.com/embed/lH4lc2JWDNM"

     

    パラメータ

     

    frameborder="0" allowfullscreen></iframe>

     

     

    どんなことが出来るかと 簡単な例

     

    こちらでは 画面下に表示されるコントローラー内にユーチューブサイトへ
    移動するロゴリンクがありますね

     

    デフォルトの記述に modestbranding=1をつけ加えます

     

     

    すると 以下のようにロゴが消えて歯車アイコン画表示されます

    参考 記載例
    <iframe width="420" height="315" src="//www.youtube.com/embed/lH4lc2JWDNM?modestbranding=1" frameborder="0" allowfullscreen></iframe>

     

    modestbranding=1の数値を0にすると ロゴと歯車アイコンが同時表示

     

     


     

    初期コードからですと記述に手違いなどもあることでしょう

     

    ここからは あらかじめ記述を改行したものを配置して
    カスタムしてまいります

     

     

    以下コードを基本に改行します

     

    <iframe width="420" height="315"src="http://www.youtube.com/embed/lH4lc2JWDNM?autohide=1&color=white&rel=0&showinfo=0&start=20&theme=light"frameborder="0"allowfullscreen></iframe>

     

    autohide=1&color=white&rel=0&showinfo=0&start=20&theme=light

     

     

    コントローラー背景を白くする

     

    whiteが指定しています

     

    <iframe width="420" height="315" src="http://www.youtube.com/embed/lH4lc2JWDNM?autohide=1&color=white&rel=0&showinfo=0&start=20&theme=light" frameborder="0"
    allowfullscreen></iframe>

     

     

    スクリーンの明暗
    lightの記述をdarkで指定する

     

     

     

    プログレス指定バーシークレットバーやコントロールの表示 非表示の選択

     

    プログレスバーで再生時間表示やコントロールバー 
    動画下部に表示される部分

     

     

    プログレスバー 
    表示 非表示を選択するには autohide=???でを設定します

     

    何れかを選択して???の箇所に記述

     

    0:隠さない 表示 

     

    1:自動的に隠す 非表示

     

    2:プログレスバーだけを隠してしまう

     

     

     

    コントローラーの表示 非表示

     

    コントロールを表示 またh非表示を制御するには「

     

    controls=???

     

    ???の箇所には以下のどちらかを配置します

     

    0:コントロールを非表示

     

    1:コントロールを表示する

     

     

     

     

    フルスクリーンボタン表示に移動しない するの選択の表示 非表示

     

    フルスクリーンボタンの表示 非表示の選択

     

    fs=??? の追加

     

    ??? の箇所にどちらかを記述

     

    0:フルスクリーンボタンを表示しない

     

    1:フルスクリーンボタンを表示する

     

     

    記述コード例をここから変えます

     

    記述にもいろいろありまして ここから上記コードをさらに変えるには
    説明しずらくなりました

     

    そこで こちらを使う場合はそのままコピーして 
    好みにカスタムしてください

     

     

     

     

    手動で再生 自動再生だとうるさいので
    コントロールバーを非表示にする

     

    プログレスバー シークレットバーを非表示

     

    タイトルバーも非表示
    まとめてコントロール 0&showinfo=0ontrols

     

     

    サイトを開いたと同時に動画スタート 自動再生にする場合は

     

    autoplay=0 記述の0を1 にしてください

     

    <iframe width="420" height="315" src="http://www.youtube.com/embed/lH4lc2JWDNM?controls=0&showinfo=0&autoplay=0&rel=0" frameborder="0" allowfullscreen></iframe

     

    以下が設定例

     

     


     

     

    HDの通常画質ではなく高画質HD1080pで再生させています
    1&vq=hd1080が指定記述

     

    コントロールバーを自動的に隠すシークレット設定
    0&controls=1

     

    タイトルバーも非表示設定
    0&showinfo=0

     

    全画面表示ボタンを非表示設定
    0&modestbranding=0

     

     

    <iframe width="420" height="315" src="http://www.youtube.com/embed/lH4lc2JWDNM?rel=0&modestbranding=0&showinfo=0&fs=0&controls=1&autohide=1&vq=hd1080" frameborder="0" allowfullscreen></iframe>

     

    設定例

     

     

     

    スポンサーリンク

     

     

    YouTube動画のパラメータカスタム
    ユーチューブ動画をサイトに取り付ける方法
    シリウスカスタマイズ

     

    シリウスで表現するYouTube動画のパラメータカスタマイズ関連解説
    YouTube動画をレスポンシブ化するコード改変とCSS指定
    YouTube動画をシリウスに取り付けてもレスポンシブ化しませんが、改行すると自動縮小します。でも変化は2例ございますのでどちらかを選択
    シリウスに取り付けたYouTube動画を自動再生にするカスタマイズ
    シリウスサイトを開いたと同時にYouTube動画をクリックせずとも自動で再生するカスタマイズ設定の取り付け解説です

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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