• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Can inner shadow be easily applied to <video>?

Engaged ,
May 17, 2023 May 17, 2023

Copy link to clipboard

Copied

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.

Views

214

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 17, 2023 May 17, 2023

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 17, 2023 May 17, 2023

Copy link to clipboard

Copied

LATEST
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>





Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines