css - Video size and border radius using a shortcode

admin管理员组

文章数量:1389897

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

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

• shortcode
• css
• video-player

Share Improve this question edited Mar 25, 2020 at 19:40 Tom J Nowell♦ 61.1k77 gold badges7979 silver badges148148 bronze badges asked Mar 25, 2020 at 17:57 Alex BothamAlex Botham 2344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I think that happend because when you reduce the width of the video the height still the same as before and the border radius does't affect. See the following image:

Do you see in the image how the radius of the edge looks a little cut when I leave the video with a higher height?

I think one solution could be, besides change the width to 200px, also change the height to same or similar as you can see in the following image.

Try it and let me know if this helps :-)

本文标签： cssVideo size and border radius using a shortcode