유튜브 iframe, 그림자, 원각과 사냥

배경.

최근 나의 임무는 우리의 로그인 페이지에 유튜브 동영상을 삽입하는 것이다.단도직입적으로 말하자면, 이것은 사실인 것 같다. 마지막 분까지 새로운 요구가 생겼다. (그들이 일반적으로 하는 것처럼) 삽입식 플레이어도 원각이 있어야 한다.
삽입에도 음영이 적용되기 때문에 이 요구는 좀 복잡하다.결국 그것을 실현하면 사파리의 그림자와 관련된 이상한 행동에 주의를 기울일 것이다.
하면, 만약, 만약...또는 코드만 보고 싶으면 this codepen for an example를 보십시오.

진입 #1: 경계 반지름

먼저 베이스라인 태그와 스타일을 살펴보고 사용 중인 내용을 살펴보겠습니다.

<div class="container">
  <div class="iframe-wrapper">
    <iframe src="https://www.youtube.com/embed/FcANFVcJeOM?disablekb=1" title="Live performance of Weird Fishes by Radiohead" frameborder="0"></iframe>
  </div>
</div>

.iframe-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 6px rgb(0 0 0 / 50%);

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

주: 상기 스타일은 scss에 있습니다.
나의 최초의 생각은 border-radius에 하나.iframe-wrapper를 더하는 것이다. 여기까지.사실 이것은 크롬과 사파리에서 효과가 좋은 것 같다.그러나 Firefox에서는 구석이 기복이 심하고 추해 보였다.따라서 이런 선택은 불가능하다.
불행히도 우리의 간단한 방법#1==❌

메서드 #2: 클립 경로 및 필터:drop-shadow()

나의 다음 생각은 clip-path에 iframe를 적용하여 필요한 경계 반경을 생성한 다음에 drop-shadow에 .iframe-wrapper 필터clip-path를 적용하는 것이다.

.iframe-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  filter: drop-shadow(0 0 4px rgb(0 0 0 / 50%));

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0% 0% 0% 0% round 10px);
  }
}

이거 크롬이랑 Firefox에서 보기 좋아요!이전border-radius에 생성된 톱니 모양의 각은 이미 사라졌고, 대신 아름다운 매끄러움이 있었다.
사파리를 열었어요. 똑같은 걸 봤으면 좋겠어요...하지만 무서운 건...내가 화면에서 본 것은 플레이어에 음영이 적용되는 것이다. 마치 내가 box-shadow에 설정한 것처럼 보인다.다음 화면 캡처를 참고하여 예시를 보십시오. (품질이 좋지 않으면 Safari에서 codepen 를 열고 위의 스타일로 바꿀 수 있습니다.)

그게 뭐야??!🤯
일을 더욱 이상하게 만드는 것은 비터치스크린 장치에서 사파리가 초점을 잃으면(예를 들어 프로그램을 전환하거나 개발 도구 중의 어떤 물건과 상호작용) 이런 이상한 추가 상자의 그림자가 사라지고 정확한.iframe-wrapper이 나타난다는 것이다.반대로 휴대전화에서 내가 페이지와 상호작용을 하면 그것은 사라진다😱
다음gif를 참고하여 이러한 행위의 예시를 보십시오. (마찬가지로 품질이 좋지 않으면 Safari에서 codepen 를 열고 위의 스타일로 바꿀 수 있습니다.)달력으로 전환하고 돌아오면 이상한 사각형 상자의 그림자가 사라지고 필요한 그림자가 나타납니다.

나는 여전히 여기가 도대체 무슨 문제인지 잘 모르겠지만, 실제로는 사파리drop-shadow에서 처음 불러올 때 제대로 적용되지 않은 것 같다.
물론 받아들일 수 없는 일이다.
그래서 불행하게도 우리의 방법#2도==❌

방법#3:?

지금, 나는 거기에서 어디까지 갈 수 있습니까?내부 요소의 윤곽을 존중하는 음영drop-shadow을 어떻게 모의할 수 있습니까?
약간 의외로, 나는 filter: drop-shadow()를 clip-path에 보존하고, iframe와 border-radius를 box-shadow에 응용하는 것이 나로 하여금 양쪽 다 좋게 할 것이라는 것을 발견했다.즉, Firefox의 구석은 부드럽게 유지되고 Safari의 그림자는 올바르게 렌더링됩니다.

.iframe-wrapper {
  --border-radius: 10px;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius);
  box-shadow: 0 0 6px rgb(0 0 0 / 50%);

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0% 0% 0% 0% round var(--border-radius));
  }

내가 발견한 유일한 문제는 때때로 이상한 추가 경계가 유저 뒤에서 엿볼 수 있다는 것이다.

그 밖에 항상 오른쪽에 있는 것은 아니다.가끔 밑에 나와요.😵‍
그러나 조정.iframe-wrapper의background-color를 통해 이 문제는 쉽게 해결될 수 있습니다!또한 비디오를 로드할 때 표준 자리 표시자를 제공하는 부작용도 있습니다.🤙
마지막으로 다음 설명은 완벽한 필렛과 섀도우를 제공합니다.

.iframe-wrapper {
  --border-radius: 10px;
  position: relative;
  aspect-ratio: 16 / 9;
  /* The next three declarations simulate
     `filter: drop-shadow(0 0 4px rgb(0 0 0 / 50%));` 
  */
  border-radius: var(--border-radius);
  box-shadow: 0 0 6px rgb(0 0 0 / 50%);
  background-color: rgba(0, 0, 0, 0.3);

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0% 0% 0% 0% round var(--border-radius));
  }

그래서 결국 #3=에 가까워졌다👍

결론

하루가 끝났을 때, 나는 결과가 매우 만족스러웠고, 그것은 주어진 임무에 효과가 있었다.물론 2단계에 멈추고 싶었습니다.iframe-wrapper.하지만 사파리와 iOS에서 엉망으로 보이는 것들을 발표할 수는 없습니다.
당신은 이 사냥 문제를 어떻게 생각합니까?너 혼자 만났어?나는 연구 중에 그것에 관한 어떤 정보도 찾지 못했다🤷‍♂️
알려줘!

업데이트/메서드 #4

방금 유튜브에서 멋진 효과를 봤어요.js Conf. embed의 컨테이너/포장기drop-shadow의 위조 요소에 선형 점차적인 배경을 설정합니다.
이 슬라이드에서는 원하는 그림자를 구현하는 방법인 #3에 추가된 세 가지 설명을 대체하는 데도 사용할 수 있습니다.

.iframe-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;

  &::before {    
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    background: #000;
    filter: blur(10px);
    opacity: .75;
  }

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0% 0% 0% 0% round 10px);
  }
}

이것은 모든 브라우저에서 잘 작동할 수 있는 좋은 방법인 것 같다.이번 회의가 아직 시작되지 않았는데, 나는 이미 약간의 것을 배웠다😄