2016年10月22日土曜日

Blogger ガジェットにスマホ版のみ レスポンシブでYoutubeを入れる


吹田市太極拳連盟はBloggerでBootstrapをかまして、jqueryを使って作っています。見た目はたいしたことないのですが、自分としては過去最高にBloggerのコードを分析しまくって作ったのです。

 

で、PC版では、nivoスライダーで見せているのを、スマホサイトでも見せたいと…気持ちはわかるけど、スマホサイトとか通信弱いとなかなか難しいということで、よしそこはYoutubeを見せる窓を創ろうと考えました。

ところがギッチョン、なぜか、Bloggerはガジェット部分にスマホだけに表示する部分をwidth 100%
ですると、youtubeを見せるiflameだけが、幅が変動しない。

どうしようと、ものすごく悩みました。

これは、divに部分的に背景に動画を見せるjqueryをやってみるかとか、いろいろ思いました。



でも、ことごとく、スマホでは表示されない。  
このレスポンシブもなるほどと思いましたが、なぜかうまく動かず…
くたびれはてまして…超妥協し、#youtube で外を囲って、そこの長さをデバイスごとに適当に決めて、そこの中に設置するという方法で書きました。

頑張ったよ.
この頃、こういう仕事が全然できない…超辛い

できたーと思ったら、ふっと見たらiPhone だけ、縦にした時に、ナビバーが長くなっており、
それがyoutube入れた時だけで、超悩んだが、こちらのサファリだけのハックというので
オーバーフローを隠すというので、なるほどと対処。
これを全体に指定すると、blogger+bootstrap では崩れるみたい。

これが、ブラウザの検証の確認だとうまくいっているから、よくぞiPhoneを買ったものだと…

いろいろあるなぁ

正規表現の基本的な使い方をJavaScriptで理解する  これをマスターしたくて購入しました…

いったいそんな暇があるのだろうか…というくらい、最近中国のお仕事を、やってやってやりまくっています。 だいぶ整理できて、少しは楽になってきましたが… でも楽しいです。




blogger に簡単につけられる スクロールボタン リンク先、ウィルスやられているので注意
広告出てもクリックしないこと

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索

View My Stats