Полноэкранное видео YouTube в качестве фона без общего доступа / Посмотреть позже / Значок / Пуск

Question

import React from "react";
import tree from "../components/tree";

function HomePage() {
  return (
    <div className="screen">
    <div className="videoContainer">
      <iframe className="videoContainer_video" width="1920" height="1080" src="https://www.youtube.com/embed/ByG3b0nIT_M?modestbranding=1&control=0&autoplay=1&showinfo=0&autohide=1&modestbranding=1&fs=0&loop=1&rel=0" frameborder="0" allow="autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"
    </div>
    </div>
  );
}

export default HomePage;

.videoContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

iframe {
    width: 100%;
    height:100%
}

.screen {
    position: fixed;
    z-index: -99;
    width: 100%;
    height: 100%;
}

Я работаю над проектом, который должен использовать видео YouTube в качестве полноэкранного фона, когда пользователь заходит на страницу.прочитал много статей и попробовал, но я могу только удалить панель управления, а не значок слева, поделиться и посмотреть позже справа, а также кнопку запуска в центре, я использую реагировать наПроект, в основном просто нужно страницу, чтобы загрузить с видео в качестве полноэкранного фона, больше ничего, может кто-нибудь помочь, пожалуйста?Спасибо.

Answer 1

Это связано с тем, что по умолчанию ссылки для встраивания на YouTube имеют встроенные функции.Вы можете увидеть это, посетив this / embed / example.Итак, короче говоря, вам нужно обновить ссылку src или просто использовать что-то вроде CSS-селекторов, чтобы игнорировать теги кнопок, которые соответствуют следующим классам: ytp-share-button и ytp-watch-later-button.Вы могли бы сделать что-то вроде этого ...

.ytp-share-button {
  display:none
}