iframe不重新調整爲移動垂直視圖

我仍然是一個HTML5菜鳥，到目前爲止我有點東西了，這是非常時髦。我在HTML5UP上發現了一個模板，我一直在修改這些模板，更改了CSS並取出了我不需要的部分，以及自己添加了一些內容。iframe不重新調整爲移動垂直視圖

現在，我想在一個畫廊中展示一些我已經實現的圖像。它在手機上的工作也很好。我想展示的另一件事是我的YouTube頻道播放列表，使用iframe嵌入。在桌面上看起來很好，但是在移動設備上，當垂直瀏覽頁面時會破壞網站。我想知道是否有辦法強制iframe通過手機屏幕來調整大小，或者如果我必須用另一個方向進行調整？（就像在JavaScript中使用視頻和音頻庫）。

來源

2014-09-13 OmniOwl

如果你可以給你的代碼，這將是有益的，但我相信this是你想要實現的？

只要給你的iframe寬度的百分比，而不是一個像素數。不過，我建議你也改變高度，因爲你可以看到它在某些寬度上看起來很滑稽。

<iframe width="100%" height="315" src="//www.youtube.com/embed/ep7W89I_V_g" frameborder="0"  allowfullscreen></iframe>

我還建議您閱讀媒體查詢的documentation。

來源

2014-09-13 19:54:01

我在此期間計算出來的。我使用了一些CSS技巧來使其工作。基本上你將iframe包裝在一個類容器中，然後使用CSS在容器上施加高寬比。那麼你只需確保你的新視頻包裝盒所在的容器是響應式的（通過告訴它寬度：100％;） – OmniOwl 2014-09-13 20:45:43

這也適用。很高興你想出來了。 – 2014-09-13 20:48:55

雖然我會選擇你的答案，因爲它也是一個解決方案。歡迎來到Stackoverflow :) – OmniOwl 2014-09-13 22:25:17

iframe不重新調整爲移動垂直視圖

回答

相關問題