Video in WordPress Einbinden

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

Video

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;}
  • Was andere über Herdima sagen

    „The Panohero is a great tool, it works wonders. Thank you and félicitation the inventor of panohero!“

    Antoine Perez (living in France)