Wie mache ich ein Video im Vollbild, wenn es in einem Iframe platziert wird?

Ich verwende die Standardeinstellung für meinen mediaelement.js Player und meine Initialisierung ist sehr einfach: $('video').mediaelementplayer();Wie mache ich ein Video im Vollbild, wenn es in einem Iframe platziert wird?

Meine Frage ist: Ist es möglich, den Player auf Vollbild, wenn das Video in einem Iframe eingebettet ist? Wenn ich Fullscreen drücke, maximiert das Video den iframe, aber nicht den gesamten Bildschirm. Ist dies eine Einschränkung von HTML oder gibt es eine Möglichkeit, um es zu umgehen?

Die allgemeine Struktur sieht wie folgt aus:

<!DOCTYPE html> 
<html> 
    <head /> 
    <body> 
    <iframe> 
     <!DOCTYPE html> 
     <html> 
     <head /> 
     <body> 
      *My Video Here <video> ...* 
     <body> 
     </html> 
    </iframe> 
    </body> 
</html>

Dank!

EDIT: Es scheint, dass dies Player spezifisch ist. Die Standard-Implementierung html5 <video> maximiert auf Fullscreen, sogar innerhalb eines Iframes.

Quelle

2013-03-07 Jazon

Warum verwenden Sie iframes? Es ist 2013 ... – BenM

Teil des Beitrags zu jemand anderen Code ... – Jazon

auf diesen über bei Video.js gestolpert:

video.js inside a modal window: full screen not working

Und die Antwort ist es, diese Attribute zu iframe hinzuzufügen: <iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> (kein obwohl IE-Unterstützung)

Quelle

2013-03-08 14:44:52 Jazon

Ich liebe einfache Lösungen. –

arbeitete für mich. Vielen Dank. –

Vielen Dank, das ist, was ich gesucht habe – LiborV

Hier ist eine "Hack" -Lösung, die sogar Ihre Seite schneller laden wird.

1) Erstellen Sie ein Bild (normalerweise ein Screenshot des Videos) anstelle des iFrame.

2) Binden Sie einen Click-Event-Handler an das Bild, so dass es einen iFrame in den von Ihnen benötigten Dimensionen erstellt. (Sie können diese Dimensionen auf der Fenstergröße des Clients basieren).

Quelle

2013-03-07 16:53:05

Interessante Idee. Ich war auf der Suche nach mehr eine direkte Möglichkeit, es zu tun, wie die Art und Weise, dass html5

Ich benutze dieses Bit des Codes, um zu verfolgen, ob ein Video in den Vollbildmodus übergegangen ist oder nicht:

MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen; 
MediaElementPlayer.prototype.enterFullScreen = function() { 
    // Your code here 
    this.enterFullScreen_org(); 
} 
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen; 
MediaElementPlayer.prototype.exitFullScreen = function() { 
    // Your code here 
    this.exitFullScreen_org(); 
}

Ich nehme an, Sie können dies eine Funktion auf der übergeordneten Seite aufrufen, um den Iframe zu vergrößern?

Quelle

2013-04-12 21:58:34

Dies ist auch nach all diesen Jahren relevant.Für Leute, die Framesets in Frage stellen, verwenden LMS-Implementierungen (Learning Management Systems) immer noch Framesets, um SCORM-Kurse zu starten. CSOD (Cornerstone OnDemand), schau dich an! Danke @Ab_c das hat gut für mich funktioniert. – Shiyaz

Mein Kunde hat sich bereits mit der begrenzten Breite des Videos 'Fullscreen' begnügt - es waren nur die schwarzen Balken oben und unten, die ich loswerden musste. (In meinem Fall waren die Abmessungen des iFrame 945 × 1500).

Dies konnte ich rein mit ein bisschen CSS beheben.

.mejs-container-fullscreen { 
    background-color: #fff !important; 
} 

.mejs-container-fullscreen .mejs-mediaelement, 
.mejs-container-fullscreen video { 
    height: 530px !important; 
    top: 500px !important; 
} 

.mejs-container.mejs-container-fullscreen .mejs-controls { 
    bottom: auto !important; 
    top: 1000px !important; /* video top + video height - controls height (30px) */ 
}

Zugegeben, dies ist eine ziemlich begrenzte Lösung, und es hängt stark von Videogröße (Größe und Konsistenz für mehrere Videos) sowie Hintergrundfarbe. Aber es kann auch für Sie arbeiten.

Quelle

2015-08-27 12:54:16 WoodrowShigeru

Wie mache ich ein Video im Vollbild, wenn es in einem Iframe platziert wird?

Antwort

Verwandte Themen