Skip to main content
Inspiring
May 17, 2023
Question

Can inner shadow be easily applied to <video>?

  • May 17, 2023
  • 2 replies
  • 338 views

What's the easiest way to apply an inner shadow to a video, if it can be done at all? (To maintain a very thin shadow over the playback.)

 

Directly applying box-shadow (inset) to the <video> tag didn't work. I even tried doing it through ::before or ::after. It can probably be done by adding a new DIV but I'm trying to avoid the extra markup. PS: The corners of the video are rounded via border-radius.

    This topic has been closed for replies.

    2 replies

    Legend
    May 17, 2023
    quote

    What's the easiest way to apply an inner shadow to a video, if it can be done at all? (To maintain a very thin shadow over the playback.)

     

    Directly applying box-shadow (inset) to the <video> tag didn't work. I even tried doing it through ::before or ::after. It can probably be done by adding a new DIV but I'm trying to avoid the extra markup. PS: The corners of the video are rounded via border-radius.


    By @Under S.

     

    Yes, it can be done using ::after -

     

    .videoWrapper {
    position: relative;
    }
    .videoWrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    box-shadow: inset 1px 1px 15px 10px rgba(0, 0, 0, 0.4);
    border-radius: 30px;
    }
    .videoWrapper video {
    width: 100%;
    display: block;
    border-radius: 30px;
    }



    <section class="videoWrapper">
    <video muted loop>
    <source src="your_video.mp4" type="video/mp4">
    </video>
    </section>





    Nancy OShea
    Community Expert
    Community Expert
    May 17, 2023

    The player styles are baked into your browser. CSS alone won't do what you want.

    • Change browsers, find a custom player script, or be content with your browser's default player.
    • Add shadow effects to the native video file before you export to MP4.

     

    Adding Drop Shadow Effect with Premier Pro

    https://www.youtube.com/watch?v=kkNHNApuIq8

     

     

    Nancy O'Shea— Product User & Community Expert