• MENU ●●●●
  • シリウスサイト背景にユーチューブ動画をCSSのみで設定する方法


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    当該サイトコンテンツ関連記事

     スポンサーリンク

    初心者でもサイト背景にユーチューブ動画をCSSのみですぐ設定する手順

    2014 1006
    シリウス外部カスタマイズテーマ CSSソース表記でユーチューブ背景

     

     

    今回の解説はシリウスで作成しているサイトの背景を全てをユーチューブ動画
    にしてみましょう ...ということです !!

     

    この頃そんな動画背景の素晴らしい?面白いサイトをみかけることが
    海外サイトなどでは多いと理解しての記事追加...

     

    大手のイメージサイトやショッピングサイトサイトなど上級テンプレートなど
    ではよく使われている手法ですが、やってみれば全然面倒なし...

     

    そのナイスなサイト構成があなたにも簡単に出来るのです..

     

    サイト説明に10秒で設定とございますが、速攻で完了しますので迷わずに
    物はお試しと...やってみてはいかがでしょうか?

     

    当ページでデモサイトとして取り付けていたのですが、夜中にうるさいと
    読者様よりクレームありましてデモはエントリーPに移動しております..
    こちらでイメージをご覧ください
    シリウスのサイト背景をオール動画設定のデモサイトです

     

     

    お気に召さないなら記述を削除するだけ.....
    2秒で済みます...多分?

     

    でも前知識としてシリウスに設置した場合の良いところや障害などを
    事前説明しますので...よくご確認ください

     

     

    良いところ

     

    シリウスに限ってのことかもしれませんが

     

    トップページHTML bodyタグ下に設置した場合は  
    トップページでのみの作動です

     

    カテゴリーHTMLに設置すると..カテゴリー全てページで作動します
    エントリーも同じく

     

     

    でも、検証結果

     

    カテゴリーでも エントリーでも 記事欄記事を...書くところですが

     

    ここにコード記載すれば個別にそのページだけにでも設定可能
    コンテンツ別のページに異なる動画を設置できるんですね

     

    また、ネット上にあるスクリプト利用の背景動画設定の場合の面倒作業...

     

    動画が一番上に重なることで記事やメニューをうまく表示できない
    という事が今回はありません

     

    サイトの重なりの..一番下が動画位置となるので、その上のメニューや
    記事..もしくは画像もすんなり編集できます

     

     

    ただし、黒文字では認識が難しくなる場合も動画の色合いによっては
    マイナス効果となることもありますね

     

    文字認識が難しい状況の場合は、スタイルシートでカラーを変えましょう

     


     

    障害

     

    リピートはしません

     

    他の動画との連続再生も今のところできておりません
    あれこれ試行しておりますので、ステップアップなどの情報は
    今しばらくお待ちください 

     

    音が消せません
    消音にすることがオブジェクトを利用してもMTML5プレイヤー
    その他のユーチューブサービスで試行しても現在できないという
    状況です

     

    jquery-tubularプラグインでならば消音は出来るものの
    記事構成が面倒

     

    当該解説のCSSですと構成はやりやすいが音が難点?

     

    いいとこだけの構成方法はないものかと試行中です
    発見できましたら追記いたします

     

     

    デフォルトの3カラムでは通常左に表示されるページメニューが表れない
    ということがありました

     

    仕方なくフリースペースで 3 4でメニューをつくりましたら
    それは表示されました

     

    でも当サイトは3カラムでもページメニューは消えません 

     

    動画コードにLEFTを指定してある個所があるのですが..
    そこが影響しているのかもしれませんが以降検証してまいります

     

    さてはて...長くなりました..

     

    説明なんぞ...後でよいからさっさとしろといらだちもございましょう
    ですのでカスタムに関しては後程追記いたします

     


     

    設定方法に参ります

     

    ユーチューブ動画サイトに入ります
    設置したい 利用可能なものを選んでIDをコピーします

     

     

    IDとは閲覧の際左上に表示されるURLです

     

     

     

     

    https://www.youtube.com/watch?v=lH4lc2JWDNM
    と表示されましたら

     

    lH4lc2JWDNM の箇所を使います   ?
    youtube.com/embed/lH4lc2JWDNM?
    赤の箇所を削除して選んだ動画URLから取出し入れ替えてください

     

     

    作業後回しで即作動を確認したい方は以下コードコピーして
    サイトに張り付けプレビューでご確認ください

     

     

    コピーしてお使いください

     

     

    <iframe style="z-index: -1;min-width: 1024px;position: fixed;top:0;left:0;" width="100%" height="100%" src="http://www.youtube.com/embed/lH4lc2JWDNM?rel=0&autoplay=1&loop=1&controls=0&wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>

     

    入れ替えが完了いたしましたら
    記事の一番上に張り付けてみましょう
    プレビューでもすぐご確認いただけます

     

     

     

     

    動画を背景にするとサイトのカスタマイズが大変ですね

     

    一般的なサイト構成ですとトップページのみの背景動画で興味を
    抱かせるイメージでメニューをちらほら掲載
    次のページでてんこ盛りメニューと進めているみたいです

     

    ですが、サイト構成に迷われるかとも思われます

     

    初期段階のサイトでしたら 一つずつ構成を考えれば良いのですが

     

    50ページもあるサイトですと ......?
    まあ..自己努力で頑張ってください

     

     

    参考カスタム

     

    シリウスデフォルトテンプレートの背景をオール動画にする場合
    記事背景やページ指定メニュー背景を削除します
    出ないと動画全てが見られません

     

    デフォルトのページ指定メニュー背景を透明化する方法
    サイドメニューを透明化 デフォルトテンプレート対象解説

     

     

    フリースペースメニューについては
    スタイルなしを選べば当サイト見たく文字のみが表示されます

     

     

    ヘッダー画像?

     

    全てのページが同じスタイルなら余り面倒もないのですが異なると 
    あれこれ迷われることになります

     

    トップページでのみ....ヘッダーを表示させない方法は
    HTMLテンプレート内でヘッダー呼び出し項目をすべて削除すれば可能..

     

    またはスタイルシートでヘッダーを透明化した場合は全てのページで
    ヘッダーが見られなくなりますが、class指定で分離表示は可能..
    でも、面倒かな....?

     

     

    グローバルメニューが動画の上に表示されるのが嫌な方もありますでしょう
    ...か?
    スタイルシートで指定してますので全てのページで表示されるものですね

     

    グローバルメニューは最初から表示させないという方法を
    選択するしかないですか?

     

    こちらはヘッダーの透明化..グローーローバルは非表示としてます

     

    スタイルシート上級者設定での個別指定が使えるエントーPなら
    非表示指定がそのPだけ可能...

     

    さて...サイト構成は、私のセンスでは言える立場にありませんので
    各人でお考えくださいね

     

     

    当サイト掲載の動画配信元サイトです
    http://www.theqcamera.com/collection.php

     

    今回はラボ様サイトで公開されている記述を使わせていただきました
    ありがとうございます
    http://www.yoshikiminatoya.com/lab/youtube/2938.html

     

    スポンサーリンク

     

     

    シリウスサイト背景にユーチューブ動画をCSSのみで設定する方法記事一覧

    シリウスのサイト背景をオール動画設定のデモサイトです

    2014 1013 2017 0625更新ご注意...夜でしたらうるさい...かもしれませんので、お隣から..家族から怒鳴られる前にPCのボリューム調整をしてください..面白い趣向かなと勝手に親(上部)ページに取り付けておいたのですが音がうるさくて...記事に集中できんとクレームがあり....こちら...

    ≫続きを読む

     

     

     

    シリウスサイト背景にユーチューブ動画をCSSのみで設定する方法
    シリウスカスタマイズ

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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