如何调整移动设备上的YouTube视频的大小? [英] How to resize a YouTube video on mobile inside of a div?
问题描述
我正在开发一个项目,并使用Bulma CSS框架Bulma.io,它是相当甜蜜到目前为止。
I'm working on a project and using Bulma the CSS frameworkBulma.io and it's pretty sweet so far.
该项目是一个非常简单的目标网页,需要在移动设备和其他平台上看起来不错。此着陆页涉及自动启动YT视频。
The project is a very simple landing page which needs to look good on mobile and otherwise. This landing page involves an auto-starting YT video.
没有设置特定尺寸,是否有自动将YT视频缩放到移动设备的方法?我是移动空间的新手。
Without setting specific sizes, is there a way to auto-scale YT videos to mobile? I'm very new to mobile space. Are here CSS directives for scaling for mobile?
推荐答案
使用 FluidVids.js 。
您需要像安装每个其他JS文件一样安装它。
然后调用以下代码,将其放在您的身体下面 fluidvids.js
脚本。
<script>
$(document).ready(function() {
fluidvids.init({
selector: ['iframe', 'object'],
players: ['www.youtube.com', 'player.vimeo.com']
});
});
</script>
这会自动调整iframe的大小,使用此配置重新调整iframe的大小YouTube和Vimeo。
如果您想要使iframe具有一定的大小,让我们说90%的宽度,居中。您可以将iframe包装在 div
中并添加 css
,如下所示:
This will automatically re-size the iframes, with this configuration it re-sizes iframes that come from both YouTube and Vimeo.
If you want to make the iframe a certain size, lets say 90% width, centered. you can wrap the iframe in a div
and add css
so it is something like this:
.YoutubeEmbedder{
margin-left: 5%;
margin-right: 5%;
}
和 html
文件应该有这样的:
<div class="YoutbeEmbedder">
<iframe width="560" height="315" src="https://www.youtube.com/embed/HICEwPK8DNY" frameborder="0" allowfullscreen></iframe>
</div>
<script src="js/fluidvids.js"></script>
<script>
$(document).ready(function() {
fluidvids.init({
selector: ['iframe', 'object'],
players: ['www.youtube.com', 'player.vimeo.com']
});
});
</script>
这篇关于如何调整移动设备上的YouTube视频的大小?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!