Question

我正在开发一个项目，并使用Bulma CSS frameworkBulma.io，到目前为止它非常甜蜜。

该项目是一个非常简单的登陆页面，需要在移动设备上看起来不错。此着陆页涉及自动启动的YT视频。

如果没有设置特定尺寸，有没有办法将YT视频自动缩放到手机？我对移动领域很新。这里是针对移动扩展的CSS指令吗？

Answer 1

使用FluidVids.js。您需要像安装其他所有JS文件一样安装它。
然后调用以下代码，将其放在您的身体下面 fluidvids.js脚本中。

<script>
    $(document).ready(function() {
        fluidvids.init({
            selector: ['iframe', 'object'], 
            players: ['www.youtube.com', 'player.vimeo.com']
        });
    }); 
</script>

这会自动重新调整iframe的大小，使用此配置重新调整来自YouTube和Vimeo的iframe。
如果你想让iframe达到一定的大小，可以说90％的宽度，居中。你可以将iframe包装在div中并添加css，这样就可以了：

.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>

如何在div内的移动设备上调整YouTube视频的大小？

1 个答案: