Verwendete Video-Quellen
- Q1: Sfiro-Video – mit ftp zum Server hochgeladen:
http://panorama-herdima.de/Sfiro_19.07.14.avi - Q2: Sfiro-Video in Mediathek von WordPress (HD, aktuelle Version):
http://www.panorama-herdima.de/wp-content/uploads/2014/08/Panoramakopf_Sfiro.mp4 - Q3: Sfiro-Video auf YouTube (niedrige Auflösung, aktuelle Version):
https://www.youtube.com/watch?v=c7sgzJ3NG8w
Q3, normaler Link
Q3, iframe, Einbettungscode (560×315) von YouTube
Q3, iframe, angepasster Einbettungscode (1280×720)
Siehe z.B. diese Anleitung.
Schlechte Auflösung trotz Produktion und Upload mit 1280×720 Pixel (16:9) => Wieder gelöscht
Q3, Responsive
Der iframe wird mit einem div-Element eingerahmt. Der eingefügte CSS-Style (Design, Theme Options, General Options, Custom CSS, am Ende) passt die Größe des Videos dynamisch an das Fenster an (für 16:9 wurde 55% geändert zu 56.25%):
.elastic-video { position: relative; padding-bottom: 55%; padding-top: 15px; height: 0; overflow: hidden; } .elastic-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Q2, Short Code, Responsive
Gemäß einem Tip aus diesem Artikel bei Stackoverflow wird der Short-Code für Videos in WordPress mit nur einer kleinen Änderung im CSS-Style responsive. Die Änderung wurde eingefügt unter Design, Theme Options, General Options, Custom CSS, am Ende:
video{ width: 100%; height: 100%; max-width: 100%; } .wp-video{width: 100% !important;}