使用短码的视频大小和边框半径

时间:2020-03-25 作者:Alex Botham

How can I remove the style attribute from the <video> tag?

I embedded a video on the front page using the video shortcode and applied a border-radius to it with CSS. It looks good.

I modified the video shortcode a bit in functions.php:

add_filter( \'wp_video_shortcode\', function( $output ) {

    $output = str_replace( "<video", "<video muted playsinline autoplay loop", $output );
    return $output;

});

The CSS:

#video-246-1_html5{
pointer-events: none !important;
border-radius: 20px !important;
background: #f4f4f4;
}

The problem:

On mobile I want the video width to be 200px. When I shrink the video to 200px with CSS, it loses the border-radius and the edges become sharp again.

I\'ve tried everything that I\'ve thought of. I also noticed the <video> tag has a

style="width= X; height: X;"

-attribute, and that correlates with the border-radius.

So basically, how can I remove the style attribute from the <video> tag? (or shrink the video some other way for mobile devices while maintaining 20px border radius)

Link to page: Webite

1 个回复
最合适的回答,由SO网友:Adriana Hernández 整理而成

我认为这是因为当你缩小视频的宽度时,高度仍然和以前一样,边界半径也不会影响。请参见下图:

Look what happen here

当我把视频放在更高的高度时,你在图像中看到边缘的半径看起来有点小了吗?

我认为一种解决方案是,除了将宽度更改为200px,还可以将高度更改为与下图中所示的相同或相似。

enter image description here

试试看,如果有帮助,请告诉我:-)

相关推荐

在HTTPS站点上,在重定向站点后,css和js URL返回到http

我有一个网站:https://media.example.com/blog/我想换成:https://www.example.com/blog/我在Wp\\u选项表的Wp DB中进行了此转换,我修改了字段:siteUrl和Home。。。现在,在重新启动Apache服务器之后,我无法加载主题Css和Js。此外,之前我在href=\'https下加载所有Css和Js,现在它们在href=\'http下加载。我读了不同的博客/解决方案。。。https://wordpress.org/support/articl