Webオリンピックのネタばっかりじゃなくて、たまにはWeb制作者らしいことを書かないと、このままではゴシップ記者の扱いを受けそうで焦っている日々です。今日はYouTubeやVineの動画をブログに埋め込むときに使う、iflameの問題に関することです。YouTubeなどで発行されている埋め込みコードをそのまま使うと、スマホで見た際に問題がおきます。そこであるコードを書いてやると、それが解決するわけです。一般的に有名なCSSコードが【魔法1】なのですが、これでがうまくいかない場合があります。その時に使える【魔法2】なんです。ここまで読むと、それっぽい記事にみえませんか?(笑)YouTubeのコードをそのまま貼り付けた場合YouTubeの共有から埋め込みコードをコピペして、ブログに簡単に貼り付けることができます。その場合スマホでみると、下記のような現象になりませんか?widthが560pxとかで指定してあるので、こういう表示になるのは当たり前ですね。最近の無料ブローグサービスやWordpressのテーマなどによっては、この問題を解消しているものもあります。ちなみにこのブログで使っているStinger3も初めから対応してます。ブログの記事にYouTubeのコードをそのまま貼るだけで、レスポンシブに対応してくれるわけです。ないブログでは、どうしてもコードを書いてやらないといけない。そこで登場するのが下記の魔法たちというわけです。有名な【魔法1】のコードGoogle検索すると、このコードを紹介しているブログが山ほど出てくるので、詳しくはそちらをごらんください。簡単に解説をすると、下記のようにCSSを作ってやっておきます。100%;}そして埋め込みコードをこの中に入れてやる。frameborder="0"></iframe></div><pre>これでPCでもスマホでもYouTubeなどが横幅ぴったりにハマるというもんです。ちなみに【魔法1】の方法でVineを埋め込んでスマホでみると。高さが指定されて、動画の両サイドに黒帯ができます。スマホで見る場合、この画面では再生されずに別画面で再生するので、Vineの動画がこのような表示になっても、格段問題はありません。先日【魔法1】で起きた現象なんですが。PCのVine画面も上記の写真と同じように表示されるんですが、この黒帯の部分に何かのバグのような画面が登場してきました。(スクショがあればいいんですが、その状態に戻すのがめんどくさいので、文章でお許しください。)さすがにバグのような状態のまま妥協するわけにいかず、別の方法を考えていたら次の【魔法2】を見つけたわけです。【魔法1】で問題が起きた方は【魔法2】をおすすめ先にコードを書いておきます。100%;}【魔法1】と【魔法2】と違いって、padding-bottomが56.25%か100%かだけの違いなんですよね。これにするだけでずいぶん違う表示になります。ちなみに【魔法2】をつかってVine動画を埋め込んでスマホで確認すると。先ほどの【魔法1】とずいぶん違いますよね。Vineのような正方形の動画もきっちり表示してくれるようになります。PCの画面も横幅100%になってしまうので、例えばブログの本文の部分が640pxだと、640px640pxの巨大な正方形になるというわけです。どちらがいいかはご自分のサイトの状況に合わせることをおすすめします。ちなみに、YouTubeの動画は【魔法1】【魔法2】ともに表示は変わりません。BMBB関連記事ワールドカップ登録全選手の出生地をマッピングした世界地図がおもしろいFIFAワールドカップ2014ブラジル大会、予選の中で最も好カードと言われたグループBのスペインーオランダ戦。自分のサイトにお気に入りの曲やプレイリストを埋め込むSpotify来日前の記事投入第2弾!今回はSpotifyの曲を自分のサイトで埋め込みモードとして使う場合を解説します。先日からキュレーションの話ばっかり書いてすみません。前の記事を書いてから最近の傾向をみてるうちに、ついつい連続投稿となってしまいました。BMBB.JP|「NAVERまとめ」に似たキュレ...記事を読むFeedlyの購読者数をチェックできるWordPressプラグインやWebサービスGoogleReaderがサービス終了してから、RSSリーダーはFeedly(フィードリー)を愛用してます。PCはFeedlyのWeb版を使ってますが、スマホは相変わらずFeedly経由でRead...記事を読む2014年早々に断捨離されたWeb系サービスたち<随時追加>お別れの季節ってもう少し先のような気がするが、Web界隈では早くもやってきている。2014年になってから、連日リリースされる「サービス終了」のお知らせ。ヘビーユーザーからは悲しみの声や、全く興味ね...記事を読むtitleタグにサイト名を表示させないサイトがあるのはなぜ?気になる記事をTwitterにシェアするときに、どのような方法を取っていますか?サイトに設置してあるTwitterボタンを使ったり、ブラウザのシェアボタンを使ったり。私は短縮URLの「bi...記事を読む「note」リリースから1ヶ月経過、現状はどうなってるのか?!2014年4月のネット界隈で話題になったのは、間違いなく「note」だろう。――つくる、つながる、とどける。4月7日にリリースされてちょうど1ヶ月が経過する。当初は色...記事を読む海外で大人気のバイラルメディア、日本でもブレイクするのか?!2013年、アメリカのWeb業界で最も話題になったのがこの「バイラルメディア」という言葉です。2013年終わりごろに日本でもサイトが出来はじめ、Web系の記事でもぼちぼち取り上げはじめております。...記事を読む話題沸騰の新サービス「note」は個人マネタイズの救世主となるのか!?2014年4月7日に個人でデジタルコンテンツを販売することができる新サービス「note(ノート)」がリリースされました。――つくる、つながる、とどける。それから2週間...記事を読むプログラマ必見!技術系キュレーション「Qiita」がかなり使えるネットでHTMLやPHP、Wordpressに関することを検索すると、最近「Qiita」というサイトがよく引っかかってくるようになりました。ともに人気どころでごめんなさい。