Video

Hier habe ich mal den Versuch gemacht ein Video als Hintergrund einer responsiven Website, die ich mit NOF erstellt habe, zu verwenden.

www.nof-tutorials.com/Responsive-Background-Video/

Dieses HTML5 Video wird nur mit einer CSS als Fullscreen Background dargestellt und funktioniert auch auf dem mobilen Gerät, allerdings nicht mit dem hier eingestellten automatischem Start, da mobile Geräte keine Videos automatisch starten. Benutzt den Pause/Play Button um das Video am mobilen Gerät zu starten.

Hier geht es zu meinem dazugehörigen Tutorial

… unten eine Ansicht von meinem Android-Handy

Handy-Screenshot

Der Amazing Slider ist eine sehr leicht zu verwendende Software. Das Programm erstellt einen Slider mit Fotos oder auch Videos vollkommen selbstständig.

Man kann den Amazing Slider zunächst als freie Version downloaden und testen.

Ihr müsst lediglich Eure Fotos oder Videos, auch z.B. Links zu YouTube oder anderen Seiten, eintragen. Man kann unter jeder Menge Design und unterschiedlichen Animationen wählen und hat auch die zusätzliche Option eine Lightbox zu verwenden.

Dies ist eine sehr schöne Alternative zum allseits beliebten WOW-Slider und lässt sich ebenso leicht direkt in NOF integrieren.

Hier ein Beispiel und mein Tutorial zum Einbau in NetObjects Fusion:

www.nof-tutorials.com/Amazing-Slider/

 
Amazing-Slider

 

Ihr findet auf meiner Beispielseite auch einen Link zum „Amazing Carousel“. Dieses Karussell wird ebenso eingebaut, bietet nur andere Optionen. Auch hier kann man Bilder oder Videos verwenden.

www.nof-tutorials.com/Amazing-Carousel/

 

 

YouTube – Videos und die lokale Publizierung in NOF

Vielleicht hat sich der eine, oder andere schon einmal gefragt, wieso nach Einbinden eines Videos von YouTube in der lokalen Publizierung nix zu sehen ist.

Bei YouTube gibt es mehrer Codes, die man in seine Webseite einbauen kann. Ich erkläre es mal an Hand des „Einbettungscodes“.

Selbst bei diesem Einbettungscode gibt es 2 Möglichkeiten, diesen zu erzeugen, einmal mit
„Teilen“ (1.) -> „Einbetten“ (2.) -> „Copy/Paste“

Youtube Einbettungscode2

 

Möglichkeit 2 ist ganz konventionell, auf das Video mit „rechts klicken“ -> „Copy & Paste“ und anschließend z.B. in das HTML eines Textfeldes (Texteigenschaften) einfügen.

Youtube Einbettungscode1

Es wird bei beiden Möglichkeiten ein fast (aber nur fast) identischer Code generiert

 

Hier die 1. Variante (Einbetten):

<iframe width="420" height="315" src="//www.youtube.com/embed/R4U79c-uERg" frameborder="0" allowfullscreen></iframe>

Hier die 2. Variante (Copy & Paste):

<iframe width="420" height="315" src="http://www.youtube.com/embed/R4U79c-uERg?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

 

Das rot markierte Protokoll „http:“, macht den Unterschied für unsere lokale Publizierung. Während mit „http:“ das Video auch lokal zu sehen ist, funktioniert das nicht mit der 1. Variante. Bei der Fernpublizierung ist das nicht relevant, aber man will es ja vorher lokal testen und auch sehen 😉

 

zum besseren Verständnis habe ich einen kleinen Tutorial-Film zum Einbau der Video-LightBox erstellt und auch bei YouTube hoch geladen.

Der Film auf meiner Tutorial-Seite

Es gibt unterschiedliche Möglichkeiten Euer Video oder auch eines von YouTube auf einer Seite darzustellen.

Eine sehr einfache Lösung ist die Verwendung der Video Lightbox von „Visual Ligtbox“. Der Einbau funktioniert ebenso leicht wie bei der Visual Lightbox, entweder direkt in die Seite oder auch als Link in einem Iframe. Die Software ist auch auf Deutsch einzustellen. Dieses Plugin ist für mobile Endgeräte geeignet.

 

 

Eine Anleitung für den Einbau in NOF könnt Ihr auf meiner Hilfe- und Tutorialseite zu NetObjects Fusion finden.

Website der Video Ligtbox