Реагируйте: возможно ли передать событие в основной iframe?

Question

У меня есть компонент React, который отображает видео YouTube внутри iframe. Чтобы пользовательский интерфейс выглядел лучше, нам бы хотелось «замаскировать» видео дугой внизу, чтобы у нее была слегка закругленная граница.

Поэтому я наивно создал элемент div, содержащий маску дуги,и расположил его над нижней частью iframe, используя position:absolute.

. Однако я заметил, что любые события щелчка теперь "перехватываются" этим div и больше не достигают базового iframe. По сути, это означает, что элементы пользовательского интерфейса YouTube, такие как панель позиции, больше не могут использоваться.

Существует ли способ передачи событий щелчка (и касания) через компонент React в базовый iframe? Я даже пытался вручную добавить обычный HTML-div в DOM контейнера React на componentDidMount, но это тоже не сработало.

Answer 1

Добавьте pointer-events: none к нижележащему элементу div. Пример

function App() {
  return (
    <div className="App">
      <div style={{ position: "relative", padding: 20, textAlign: 'center' }}>
        {/* OVERLAY */}
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            pointerEvents: "none",
            background: "red",
            opacity: 0.1
          }}
        />
        {/* ANYTHING BELOW */}
        <button
          style={{ padding: 10, fontSize: 18, cursor: 'pointer', background: 'orange', fontWeight: 'bold', color: 'white' }}
        >CLICK ME EVEN IF I AM BELOW THE DIV</button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>