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%; }