サポート » テーマ » Twenty TwelveにYoutubeを貼り付けてスマホで見ると縦長

  • 解決済 inos-mini

    (@inos-mini)


    いつも参考にさせていただいております。

    Twenty TwelveにYoutube動画を埋め込み、ブラウザの横幅を縮めて表示させてみると動画の縦横アスペクトが狂ってしまい、縦長になります。
    正確に言うと動画を再生させるとムービー自体はちゃんとしたアスペクトで表示されるのですが、上下に黒い余白がつきます。

    スマートフォンで表示させた場合は、本来横長の動画なのに縦長のエリアに長体になって表示されます。スマートフォンの場合も再生させれば大丈夫です。

    これはレスポンシブデザインとしての自動縮小機能のうち埋め込みYoutubeに対してのみ機能が働いていないためと想像しますが、縦横のアスペクトを保ったまま表示させるにはどこをいじれば良いでしょうか?

    お知恵をお貸し頂ければ幸いです。よろしくお願い致します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    oembedが、レスポンシブに設計されていないためにこのようになっていると思います。

    iframeが、テーマの、$content_widthに対応する高さで、書き出されるため、高さが固定で、max-widthで、幅方向は、本文幅に制限されて、アスペクト比は、ブラウザの幅によって変化します。

    スタイルシートで

    iframe[src^="http://www.youtube.com/embed/"]{
    
    height:500px;
    }

    とすれば、高さはコントロールできるので、どこまでこだわるかによりますが、簡単な方法だと、メディアクエリなどを使って、ブラウザは場に応じた高さを指定してやれば、軽減するのではないかと思います。(未テスト)

    トピック投稿者 inos-mini

    (@inos-mini)

    nobitaさん

    こんにちは。回答有り難うございます。oembedなるものを初めて知りましたが、テーマはレスポンシブでも埋め込みコンテンツの仕組みがレスポンシブではない事が原因なんですね。なるほど理解出来ました。

    と言う事は、スタイルシートでいじるとしたらある特定のデバイスをターゲットにして高さを決めるしかなく、世の中に存在する様々なデバイスで期待する結果が得られるかというとなかなか難しい感じですね。

    有り難うございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「Twenty TwelveにYoutubeを貼り付けてスマホで見ると縦長」には新たに返信することはできません。