如何调整移动设备上的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屋！