HTML5 Video-Player im Pop Up Fenster öffnen lassen. Geht das?

Lenka · 28.05.2018

Hallo Leute,
ich habe schon bei dem Google mögliche Varianten durch probiert, leider ohne Erfolg.
Hier habe ich auch nichts gefunden, was mich weiterbringen würde.

Das Problem ist folgende:
ich möchte auf einer Webseite das Video anbieten. Bis jetzt klickt man drauf und das Video läuft, man kann es auch im Vollbildformat anschauen. Ich möchte aber, dass das Video, nach dem man auf den Start geklickt hat, in einem Pop Up Fenster geöffnet wird. Im Zentrum soll das Video laufen (im Kleinformat), im Hintergrund soll graue Farbe sein. So wie es üblich bei der Foto-Vergrößerung ist.

Hat jemand eine Idee, wie ich das realisieren kann?

Danke im Voraus für die Mühe.

lachender_engel · 28.05.2018

Du musst nach Modalbox oder Lightbox suchen. Das sind Deine Schlagwörter.

Annihilator · 30.05.2018

Lege auf die Ursprungsseite ein Bild Deines Videos, vieleicht sogar mit dem Play-Dreieck, ab und verlinke das Bild mit Deinem Popup. Es kann natürlich sein, daß der eine oder andere Popupblockerer diesen Aufruf unterdrückt. Manche Browser öffnen den Link dann auch in einer neuen Registerkarte und nicht in einem neuem Fenster.

Gruß
A

Gelöschtes Mitglied 633957 · 31.05.2018

Lenka schrieb:
Hat jemand eine Idee, wie ich das realisieren kann?

Wollte eigentlich auf jQuery verzichten, das hat aber nicht so geklappt wie gewünscht, daher eine gemischte video.js.
Ist halt Quick&Dirty!

index.html

HTML:

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vollbild Overlay mit Video</title>
  <link rel="stylesheet" type="text/css" href="video.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="video.js"></script>
</head>

<body>

<div id="ZeigeVideo" style="display: none;">
  <div class="VideoStyle">
    <span class="Beenden">
      <a href="javascript:VideoContainer('ZeigeVideo');">Video schlie&szlig;en</a>
    </span>
    <br>
    <video id="VideoPlayer" controls autoplay>
      <source src="" type="video/mp4">
      Das Video kann in deinem Browser leider nicht abgespielt werden.
    </video>
  </div>
</div>

HIER DER SEITENINHALT MIT LINKS ZU DEN VIDEOS
<br><br>
<a href="javascript:VideoContainer('ZeigeVideo'); VideoDatei('video1');">Video1 abspielen</a>
<br>
<a href="javascript:VideoContainer('ZeigeVideo'); VideoDatei('video2');">Video2 abspielen</a>

</body>

</html>

video.js

Code:

function VideoContainer(DivID) {
  if(document.getElementById(DivID).style.display == "none") {
    document.getElementById(DivID).style.display = "flex"; }
  else {
    document.getElementById(DivID).style.display = "none";
    var video = document.getElementById("VideoPlayer");
    video.pause();
  }
}

function VideoDatei(VideoID) {
  $('#ZeigeVideo video source').attr('src', VideoID + '.mp4');
  $("#ZeigeVideo video")[0].load();
}

video.css

Code:

#ZeigeVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 999;
  background-color: rgba(92, 92, 92, .92);
  overflow: hidden;
}

.VideoStyle {
  width: 50%;
  display: table;
  margin: auto auto;
}
.VideoStyle a {
  color: White;
  font-weight: bold;
  text-decoration: none;
}
.VideoStyle a:hover {
  color: Tomato;
}
.VideoStyle .Beenden {
  float: right;
}

video {
  width: 100% !important;
  height: auto !important;
}

In diesem Beispiel liegen alle Dateien im gleichen Ordner, inklusive der beiden MP4-Videos, "video1.mp4" und "video2.mp4".
Der Dateiname des Videos wird in der HTML-Datei mit VideoDatei('video1'); angesprochen. Die Dateiendung ".mp4" wird in der video.js hinzugefügt.