W obszarze TYLKO szarego tła ma być odtwarzany filmik

Question

Wrzuciłem kod na jsfiddle:
https://jsfiddle.net/Krzysiek_35/yr6ek47r/

Odtwarzany filmik ma sie pojawić tylko w obszarze szarego tła, a jest na pełnym ekranie. To szare tło zasłania ten filmik. Na jsfiddle nie można odtwarzać filmiku w formacie WEBM, więc wyobraźcie sobie, że coś tam jest odtwarzane. Stopka powinna być na samym dole, a tam wskoczyła nieco do góry. Uruchomiona na Notepadzie++ znajduje się na samym dole i jest ok.

Nad i pod filmikiem (w obszarze szarego tła) ma być to ciemno-niebieskie tło. Prosiłbym o to, aby za bardzo nie zmieniać kodu, tylko wprowadzić istotne poprawki. Uważam, że tam w kodzie brakuje tylko kropki nad "i".

Czy da się tak zrobić, aby filmik pojawił sie tylko w obszarze tego szarego tła?

Będę bardzo wdzięczny za pomoc.

Answer 1

Zmiana na to powinna naprawić problem ;) :

video {
  // position: fixed;    ]
  // top: 0;             } Tych rzeczy ma nie być 
  // left: 0;            ]
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

 

Comments

Są postępy. Filmik pojawił się, ale po środku tego szarego tła, a ja chciałbym, aby pojawił się na całym obszarze tego tła. Pozycja ma być tylko ustalona jako position: fixed, czyli filmik ma "stać w miejscu", gdy zawartość strony będzie przewijana.

Czy da się tak zrobić, aby filmik pojawił się na całym obszarze tego tła i ma stać w miejscu podczas przewijania strony?