为什么 javascript (fluidvids.js) 仅在视频嵌入*之后*加载时才有效？
Why is a javascript (fluidvids.js) only working when loaded *after* a video embed?
当 fluidvids.js 代码插入 之前 视频嵌入时，我无法获得 fluidsvids.js to work on my github pages-hosted website (running on Poole/Jekyll)。
但是，在嵌入视频 后插入代码 时，由于 fluidvids.js，视频会根据布局调整大小。 这是为什么？
我提取了整个fluidvids zip file into /public/js/fluidvids。
在我的 _includes 文件夹中，我创建了一个 html 文件，fluidvids.html:
<!-- fluidvids.js -->
<script src="{{ site.baseurl }}public/js/fluidvids/dist/fluidvids.js"></script>
<script>
fluidvids.init({
selector: ['iframe'],
players: ['www.youtube.com', 'player.vimeo.com']
});
</script>
在我的 default.html 布局中，我插入了 {% include fluidvids.html %}:
<!DOCTYPE html>
<html lang="en-us">
{% include head.html %}
{% include google_analytics.html %}
<body>
{% include fluidvids.html %}
{% include sidebar.html %}
<div class="content container">
{{ content }}
</div>
</body>
</html>
最后，我在post中嵌入了两个测试视频； 2007-02-10-Island-of-Lost-Souls.md:
<iframe src="https://player.vimeo.com/video/9685584" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe width="420" height="315" src="https://www.youtube.com/embed/ZdyzjKDWpYU" frameborder="0" allowfullscreen></iframe>
但是，在我将 include 放在 博客 post 内容之后，视频不会随布局调整大小，如下所示：
<!DOCTYPE html>
<html lang="en-us">
{% include head.html %}
{% include google_analytics.html %}
<body>
{% include sidebar.html %}
<div class="content container">
{{ content }}
{% include fluidvids.html %}
</div>
</body>
</html>
这是为什么？
Here's 呈现的 post，当 fluidvid.js 加载 之后 博客 post 内容。
因为您在调用 fluidvids.init 之前没有等待文档就绪（加载）。如果该脚本块在您的视频元素之前，您需要等待文档加载事件，否则初始化将（默默地？）失败，因为选择器不会 return 任何元素，因为浏览器没有机会处理他们的标记呢。
因此，要么绑定到 onload 事件，然后 运行 fluidvids 初始化，要么在相关元素之后包含脚本块。
顺便说一句，最佳做法是将脚本块包含在正文元素的末尾。
当 fluidvids.js 代码插入 之前 视频嵌入时，我无法获得 fluidsvids.js to work on my github pages-hosted website (running on Poole/Jekyll)。
但是，在嵌入视频 后插入代码 时，由于 fluidvids.js，视频会根据布局调整大小。 这是为什么？
我提取了整个fluidvids zip file into /public/js/fluidvids。
在我的 _includes 文件夹中，我创建了一个 html 文件，fluidvids.html:
<!-- fluidvids.js -->
<script src="{{ site.baseurl }}public/js/fluidvids/dist/fluidvids.js"></script>
<script>
fluidvids.init({
selector: ['iframe'],
players: ['www.youtube.com', 'player.vimeo.com']
});
</script>
在我的 default.html 布局中，我插入了 {% include fluidvids.html %}:
<!DOCTYPE html>
<html lang="en-us">
{% include head.html %}
{% include google_analytics.html %}
<body>
{% include fluidvids.html %}
{% include sidebar.html %}
<div class="content container">
{{ content }}
</div>
</body>
</html>
最后，我在post中嵌入了两个测试视频； 2007-02-10-Island-of-Lost-Souls.md:
<iframe src="https://player.vimeo.com/video/9685584" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe width="420" height="315" src="https://www.youtube.com/embed/ZdyzjKDWpYU" frameborder="0" allowfullscreen></iframe>
但是，在我将 include 放在 博客 post 内容之后，视频不会随布局调整大小，如下所示：
<!DOCTYPE html>
<html lang="en-us">
{% include head.html %}
{% include google_analytics.html %}
<body>
{% include sidebar.html %}
<div class="content container">
{{ content }}
{% include fluidvids.html %}
</div>
</body>
</html>
这是为什么？
Here's 呈现的 post，当 fluidvid.js 加载 之后 博客 post 内容。
因为您在调用 fluidvids.init 之前没有等待文档就绪（加载）。如果该脚本块在您的视频元素之前，您需要等待文档加载事件，否则初始化将（默默地？）失败，因为选择器不会 return 任何元素，因为浏览器没有机会处理他们的标记呢。 因此，要么绑定到 onload 事件，然后 运行 fluidvids 初始化，要么在相关元素之后包含脚本块。
顺便说一句，最佳做法是将脚本块包含在正文元素的末尾。