手机上的视频宽度

Question

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

我尝试在 chrome 控制台中设置一些值，例如 max-width: 100%;宽度：自动；宽度：适合内容；以及我在 google 中找到的其他一些技巧（我仍在学习 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>

手机上的视频宽度

Video width on mobile

css

wordpress

video

mobile

elementor