移动设备上的视频宽度

Question

我在 Elementor 插件的背景部分添加了视频。在桌面上，它可以完美扩展并完美运行，但在移动视频上被裁剪并且不适合屏幕。

我尝试在chrome控制台中设置一些值，例如最大宽度：100%;宽度：自动;宽度：适合内容;以及我在谷歌中找到的其他一些技巧(我仍在学习css(

我想这是 CSS 的一部分，我应该加宽但它不起作用。

@media (max-width: 767px)
.elementor-15 .elementor-element.elementor-element-1e70f52 {
padding: 50px 30px 50px 30px;
}

我想使视频宽度适合设备屏幕而不会被裁剪。

Answer 1

我认为遵循媒体查询格式会对您有所帮助。将视频代码的宽度和高度大小放入以下媒体查询中。

<style>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {  
/* Your CSS Code for this device size */    
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {  
/* Your CSS Code for this device size */    
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {  
/* Your CSS Code for this device size */    
} 
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {  
/* Your CSS Code for this device size */    
}      
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */ 
}
/* According to Mobile Orientation */
@media only screen and (orientation: landscape) {   
/* Your CSS Code for this device orientation */    
}
</style>