16:9 video als overlay auf der wp startseite

hallo. ich würde gerne auf meiner wp homepage ein video laufen lassen. und zwar sollte sich die gesamte seite abdunkeln (wie bei der lightbox galerie ansicht) und dann ein video von youtube zu laufen beginnen, welches man einfach rechts oben per klick aufs x schliessen können sollte.

ist es möglich auf der willkommenseite ein video in einem overlay zu öffnen. gibt es genau dafür ein plugin.

die seite momentan: http://www.weinkellerei-woeber.at/wordpress/

so sollte es aussehen:

danke, und gute nacht.

Zitat von formateins

Dazu braucht es kein Plugin - die Fancybox (wird von Theme verwendet) kann iFrames und somit auch youtube-Videos entgegen nehmen. Beispiel:

Code

<a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>

Vom "Zwangs-Popup" rate ich aber ab und würde stattdessen einfach eine Seite mit entsprechendem Inhalt nutzen. Zentrierte Darstellung anhand der Seiten-ID ist via CSS dann ja kein Problem. ;)

danke, das zentrieren bringe ich mittlerweile hin :) danke für den tipp mit der fancybox.

aber wie meinst du das mit zwangspopup? auf dieser startseite öffnet sich ja keine seite sondern nur die slideshow im hintergrund. wie kann ich jetzt das video starten ohne mühsam übers menü zu geben?

Zitat von formateins

Da Du einen qualitativ hochwertigen Slider im Hintergrund hast, würde ich auf der Startseite so eine "gugg-das-Video-JETZT"-Geschichte lassen. Aus meiner Erfahrung und den dollen Statistiken anderer steigt da die Absprungrate... :) Evtl. würde ich die Bilder noch bei jedem Besuch zufällig laden lassen, das sollte über einen kleinen Filter im Theme kein Problem sein.

Ich hab Dir mal eine Idee angehängt...

[ATTACH=CONFIG]8375[/ATTACH]

Das Video kann ja starten und abspielen, aber das würde ich dann doch kontrollieren wollen... vor allem, wenn im Hintergrund Bilder mit rund jeweils 1,5 MB geladen werden!!! Tipp: im onload-Handler via jQuery wasweissich Bild Nr. 3 oder 4 triggern und dann erst das Video laden. Oder ein Video-Preview-Snippet generieren, bspw. 6-8 Sekunden, das in der Auflösung wie es eingebunden wird erstellen und ablaufen lassen. Als Schlussbild ein "Mehr erfahren" reinpinnen und auf Klick wird dann die Lightbox mit dem vollständigen Video geöffnet.

Möglichkeiten bieten sich hier - mal mehr, mal weniger technisch Anspruchsvoll. Die Ladezeit der Seite ist aber nicht unerheblich, deswegen würde ich das an der Stelle so (oder ähnlich) handhaben.

super idee, danke. darf ich mich zwecks umsetzung per pn an dich wenden (natürlich bezahlter weise) :) Ld, danke Alexander

Zitat von formateins

Mach das ruhig mal Öffentlich hier, da profitieren sicherlich auch andere von... für sowas will ich kein Geld.

Grobe Richtung (ungetestet):

Code

<div id="home-video" style="position:absolute; left:30px; bottom:30px; width:400px; height:290px; margin:0; padding:6px; background-color:rgba(0,0,0,0.4); border-radius:4px;">
  YT-Video
</div>

Normalerweise kann man sich das Vergrößern in einer Lightbox sparen - der Knopf ist ja im YT-Video drin.

Eine einfache jQuery-Anweisung lädt und startet das Video dann verzögert:

Code

$('#home-video').delay(2000).fadeIn(1000);

In dem Fall 2 Sekunden Verzögerung, 1 Sekunde lang aufblenden. Autoplay & Co. regelst Du über den YT-Embed.

Genauso kann man dann auch noch einen Close-Button einbinden oder so ein Firlefanz veranstalten, den ich nicht mag:

Code

$('#home-video').one('hover', function () {
    $("#home-video").animate({'top': '-=100px'}, 1200);
});

Über das "animate" kannst Du noch weitere CSS-Eigenschaften deklarieren, bspw. auch einen fingierten Resize des DIV's. Über "one" wird's dann auch nur einmalig ausgeführt. Hab's noch nie mit einem iframe ausprobiert und hab da auch kein Bock drauf, weil garantiert Stressig! ;)

Alles anzeigen

alles klar, danke ich werde das mal versuchen. als plan b binde ich das video einfach in einen blogbeitrag ein. kann ich dafür den code auch so verwenden und "einfach" per editor in den beitrag schreiben oder muss ich das anders machen, dass das video zb. 700pxbreit im blogbeitrag erscheint und automatisch startet? danke und gute nacht :)

alles klar, das plugin hole ich mir. d.h. ich sehe dann ein vorschaubild und wenn ich darauf klicke öffnet sich eine seite in der das video eingebettet ist? habe ich das so richtig verstanden?

letzte frage, wie bekomme ich das video von youtube in die seite. ich habe da leider bei diesem theme keine funktion: video in seite einfügen. hast du da einen tipp mit welchem code ich das machen kann, damit es schick aussieht und auch sauber funktioniert?

nachtrag: [h=2]Nav Menu Images 3.1. ist installiert :)[/h]

alles klar - denke ich zumindest.

das mit dem icon anstelle eines textes im menü hat geklappt, auch das anlegen eines neuen menüs. nur wie sage ich meinem neuen menü "video" mit einem menüpunkt "video abspielen" jetzt wo seine position ist.

ich hätte es gerne unten links wie von dir vorgeschlagen aber wie bekomme ich das dort hingepflanzt?

Ja danke, gute nacht. bis morgen. werde mich abends dransetzen. danke für die tollen tipps! ;)

frage in die runde: ich habe mir jetzt ein plugin besorgt mit dem ich youtube videos einbinden kann (youtube master). damit kann ich die größe des videos angeben und auch dass es in 1080p abgespielt werden soll und mann kann auf vollbild klicken.

habt ihr vorschläge welches plugin für youtube und vimeo am besten ist? danke :) und ich suche noch eine möglichkeit das video dann per social netwerk zu teilen.

da gibt es ja viele plugins - share this hatte ich mal nur da gibt es dass problem dass die buttons zum teilen dann auf jeder seite zu sehen sind was ich natürlich nicht will. also welches plugin verwendet ihr, und wie könnt ihr manuell bestimmen auf welchen seiten es erscheint und welchen nicht? danke ;)

Hi Frank, danke für die Infos. Sieht ganz gut aus, nur was mir nicht gefällt ist dass man die Buttons "einschalten" muss, gibt es bei dem plugin auch die möglichkeit das die buttons immer aktiv sind und der "ein-ausschalter" gar nicht angezeigt wird. ansonsten finde ich es toll. gibt es euch den button "facebook SHARE" oder ist der bei dem plugin nicht dabei?