Question

我有2个不同的YouTube视频，用于2个特定的屏幕宽度。

我想动态加载每个视频，只有当访问者点击该屏幕大小时，而不是在加载文档时加载它们。

<div id="size1000">
  <iframe width="250" height="250" src="https://www.youtube.com/embed/tR-5AZF9zPI" frameborder="0" allowfullscreen></iframe>
</div>
<div id="size500">
  <iframe width="200" height="200" src="https://www.youtube.com/embed/tR-K69A1lL1PHQ" frameborder="0" allowfullscreen></iframe>
</div>

CSS

#size1000, #size500{
   display:none;
}
@media(width:1000px){
    #size1000{
      display:block;
    }
}
@media(width:500px){
    #size500{
      display:block;
    }
}

这可能吗？如果是这样，这是怎么做到的？

Answer 1

由于我误解了您的要求，这是一个简单的示例，它使用Javascript检测客户端宽度，并根据屏幕尺寸显示正确的YouTube标记（如果有）。

Here's another Plunk。与媒体查询示例不同，您需要在每次更改帧宽后停止并重新运行它。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <script>
    if (document.body.clientWidth >= 1000) {
      document.write('<iframe width="250" height="250" src="https://www.youtube.com/embed/tR-5AZF9zPI" frameborder="0" allowfullscreen></iframe>');
    } else if (document.body.clientWidth >= 500) {
      document.write('<iframe width="200" height="200" src="https://www.youtube.com/embed/tR-K69A1lL1PHQ" frameborder="0" allowfullscreen></iframe>');
    }

  </script>
</body>

</html>

这不会处理动态变化的显示尺寸，例如方向更改。你必须抓住这个事件才能做到这一点。但它向您展示了基础知识。

更新：这是处理屏幕调整大小事件的基本形式。这里应该有很多问题要处理。

window.onresize = function(event) {
    ...
};

我希望这就是你的意思。如果没有，我放弃。 ;）

Answer 2

这个怎么样？如果屏幕宽度为500到999px，则仅显示第一个，另一个仅在1000px或更高时显示？

#size1000, #size500{
   display:none;
}
@media(min-width:500px) and (max-width: 999px) {
    #size500{
      display:block;
    }
}
@media (min-width:1000px){
    #size1000{
      display:block;
    }
}

请注意，这是加载两者，但仅显示一个（或小屏幕不显示）。如果视频是自动播放，那可能是个问题。

这是一个有效的Plunk demo of it。

在调整大小时延迟加载YouTube

2 个答案: