Video in HTML einbetten

Guten Morgen,
ich versuche seit einiger Zeit ein Video in htm einzubetten.
1.Versuch Youtube
- Video erstellen, hochladen, teilen embed.

Angeschaut: Youtube, Teilen und Vollbild möchte ich nicht haben, wohl aber ein Vorschaubild. AUf diversen Seiten erscheinen die Playbuttons erst beim hover. OK, Optionen angeschaut und kopiert. noFullscreen, Problem: Funktioniert nicht beim Firefox. Edge geht und Chrome geht. Goole bemüht. In Firefox muss man es erst aktiviern. Css-Versuche. Nichts.

Zweiter Versuch: Vimeo. Selber Weg, FF geht, abe rdie Optionen gehen wohl nur in der Bezahlversion. >Da es ein Verusch ist, möchte ich ungern ein Abo abschließen.

Dritter Verusch: html5 und das MP4 von YT heruntergeladen (5 MB). Funktioniert, aber die Optionen bekomm eich nicht weg.
Der Nutzer soll eigendlich nur den Playbutton sehen. Das Video soll auf der Seite abgespielt werden, kein Vollbild kein auf xy anschschauen, kein Teilen. Und dann via css die Buttons in den hintergrund legen.

X Seiten angeschaut, wo es geht. Da sind aber Tonnen von Javascript dahinter.

Hier mal der Code von Seite 1 (localhost):

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

	<head>
	<style>
video::-webkit-media-controls-enclosure {
  display:none !important;
}
	</style>
		<title>
			
		</title>
	</head>

	<body>
	Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Wel
	<div style=" display: flex;  
				justify-content: center;
				align-items: center;
				height: 485px;
				width:600px;
				border:1px solid red;
				margin: 0px 50px;float:right;">  
		<video style=" border:1px solid blue;" width="560" controls poster="tnpw.jpg" preload controlsList="nodownload nofullscreen noremoteplayback"> <source src="gleichePasswoerter.mp4" type="video/mp4">  
	</source>
	</video></div>

	Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - 
		Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - 
		Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - 
		Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - 
		Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - Hallo Welt - 
		
		================================================
		
		platzieren.</p><p class="magazineTypography_MagazineParagraph__cgUu8">Doch das ändert sich nun:</p><div data-nosnippet="true" class="blogPageVideo_StyledVideo__jbP_y videoLazy_FullSize__3u5Fs"><button aria-label="Video abspielen" class="video_OverlayButton__oESBK"></button><div style="background-image: url(&quot;https://img.youtube.com/vi/I44_zbEwz_w/maxresdefault.jpg&quot;); background-size: cover;" class="thumbnail_ThumbnailBackground__34nGa"></div><div aria-hidden="true" class="thumbnail_YoutubePlayButtonSvg__TvBqp YoutubeIllustration_YoutubeIllustration___WFRi baseIllustration_BaseIllustration__jo9kp"></div><div style="opacity: 0;" class="video_VideoWrapper__sDe__"></div></div><p class="magazineTypography_MagazineParagraph__cgUu8">Im neuesten Video wirkt Atlas überr  
	</body>
	</html>

Versuch xy:

<!DOCTYPE html>
<html lang="de">  
  <head>
  <style>
 .video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 30%;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
  </style>
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Titel</title>
  </head>
  <body> <div style="float:left;padding-right:20px;">Peng!</div>  
 <iframe style="padding:15px;" width="1180" height="664" src="https://www.youtube.com/embed/qw1Bt3lmwgI" title="Gleiche Passwörter" frameborder="2" allow="accelerometer; autoplay; http://localhost/youtube.htmlencrypted-media; " referrerpolicy="strict-origin-when-cross-origin" „showinfo=0“ allowfullscreen></iframe>  
 
 <br><br>
 <div class="video-wrapper">  
   <iframe src="https://www.youtube.com/embed/qw1Bt3lmwgI" width="560px" height="315px" frameborder="0" allowfullscreen></iframe>  
</div>
 
 <br><br>
   </body>
</html>

Statt iframe <video> genommen. Irgendwo stand, ich müsse jeden Browser abfangen. Aber das wird aberwitzig.

Das gibts doch gar nicht. Irgendwelche Erfahrungen?
mfg aloja

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 672271

Url: https://administrator.de/forum/video-in-html-einbetten-672271.html

Ausgedruckt am: 02.04.2025 um 15:04 Uhr

4 Kommentare

Neuester Kommentar

https://www.w3schools.com/html/html5_video.asp

Moin,

nicht mit fremden Quellen. Aber mal mit OBS und Mistserver:

https://mistserver.org/documentation

https://docs.mistserver.org/howto/player/embed/

Damit wurde Film via Xibo und Android nachdem laden ohne Button druck abgespielt. Ist ja auch nicht selberständlich.

mistserver hat viele Einstellungen.

https://www.youtube.com/watch?v=fiNMHhaXHIg&list=PLKlgN-Pehk-2wLfd82 ...

Bei Youtube wird es ggf. etwas anders laufen. Wenn es aber um selbstgehostete Videos geht wäre mistserver vlt. etwas.

Zumindest kannst du dir da die Code-Schnippsel mal ansehen und es ggf. für andere Projekte adaptieren.

Im LAN / Intranet wäre es z.B. damit einfach zu lösen.

mfg Crusher

Moin,

evtl so? (Ich verstehe deine Anfrage nicht 100%ig)
(Vorschaubild musst Du selbst hinterlegen)
Funktioniert lokal problemlos.

<!DOCTYPE html>
<html lang="de">  
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Video Modal</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>  
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #previewImage {
            width: 300px;
            cursor: pointer;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <img id="previewImage" src="https://peach.blender.org/wp-content/uploads/bbb-splash.png" alt="Vorschau-Bild" class="img-fluid mt-3">  
    
    <div class="modal fade" id="videoModal" tabindex="-1" aria-hidden="true">  
        <div class="modal-dialog modal-dialog-centered">  
            <div class="modal-content">  
                <div class="modal-header">  
                    <h5 class="modal-title">Video Vorschau</h5>  
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>  
                </div>
                <div class="modal-body">  
                    <video id="previewVideo" class="w-100" controlsList="nodownload nofullscreen noremoteplayback" controls>  
                        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">  
                        Dein Browser unterstützt kein HTML5-Video.
                    </video>
                </div>
            </div>
        </div>
    </div>

    <script>
        const previewImage = document.getElementById("previewImage");  
        const videoModal = new bootstrap.Modal(document.getElementById("videoModal"));  
        const video = document.getElementById("previewVideo");  

        previewImage.onclick = function() {
            videoModal.show();
        }

        document.getElementById("videoModal").addEventListener("hidden.bs.modal", function () {  
            video.pause(); // Video stoppen beim Schließen
        });
    </script>
</body>
</html>