Ein eingebettetes OneDrive-Video responsiv machen

OneDrive generiert einen html-Code zur Einbettung eines dort gespeicherten Videos. Dieser Code wird in Joomla in einen Beitrag auf der Scriptebene eingefügt. Ggf. muss vorher in den Modul-Einstellungen das Verbot von iFrame entfernt werden.

Um das Video responsiv zu machen, muss der Code erweitert werden. Das Video (Mehr zum Video und Code darunter!) zeigt sich dann so:

 

Unbefriedigend an der Darstellung des Videos ist auch hier: 

  • Es zeigt anfangs den Titel des Videos an, was nicht unterdrückt werden kann.
  • Es bietet Button, die nur funktionieren, wenn man mit einem Microsoft-Account angemeldet ist oder sich im Nachhinein anmeldet. Das ist in der Regel bei einer externen Website nicht erwünscht.
    Wenn man nicht angemeldet ist, gibt es Fehlermeldungen und kuriose Ereignisse: Man landet z.B. auf einer Microsoftseite.

    Die Button können nicht unterdrückt werden und sind:
    • [In Stream ansehen]
    • [Link Video kopieren]
    • [Video aufzeichnen] und später
    • [Teilen]

--- Erläuterungen zum Code ----------

Der von OneDrive generierte Einbettungscode:

<iframe src="https://1drv.ms/v/c/877a835d2b9fd7f0/IQSxw8rdJAO-TZtwQ7FuKlagAWpaBl13NPO89DsPpH5pvmU" width="1920" height="1080" frameborder="0" scrolling="no" allowfullscreen></iframe>

Durch diese Änderungen am Code wird das Video responsiv gemacht:

<div class="container-responsiv"><iframe class="iframe-responsiv" src="https://1drv.ms/v/c/877a835d2b9fd7f0/IQSxw8rdJAO-TZtwQ7FuKlagAWpaBl13NPO89DsPpH5pvmU" allowfullscreen="allowfullscreen"></iframe></div>

Und dazu wird Folgendes in die user.css eingetragen.

.container-responsiv { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ }
.iframe-responsiv { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }