Playing a YouTube video behind a transparent gradient

HTML & CSS
1

I was curious if this would be possible or not.
It most likely isn’t.

In firefox autoplay shows it playing behind the gradient:
But the screen isn’t clickable at all.

image
image752×234 71.1 KB

.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 45px;
  border-radius: 25px;
  cursor: pointer;
  border: 3px solid #FA33FC;
  box-sizing: border-box;
  overflow: hidden;
}

.wrapg iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 606px;
  height: 344px;
  border-radius: 25px;
  box-sizing: border-box;
}

.wrapg .grad {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 338px;
  border-radius: 25px;
  background-image: linear-gradient( to right, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
}

.hide {
  display: none;
}
2

In order to “click through” elements, use pointer-events: none. So try:

.wrapg .grad {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 338px;
  border-radius: 25px;
  background-image: linear-gradient( to right, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
}
1 Like
4

Ok, so that’s what I’m trying to do, click through an element.

Thank you.

It’s still a little buggy though.

I wonder if there are other ways of doing it.

This: worked, but the red youtube button issues is still occurring.

 pointer-events: none;

This One:
The same issue arises where it takes a few more sends for the red playbutton to disappear.
But it’s not something that happens all the time, but it still happens.

I thought by using a gradient instead of before and after lines, it would work differently.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.