Demo Seiten

Auf den Seiten dieser Kategorie zeige ich euch was denn so alles möglich ist. Details zu den genutzten Applikationen / Techniken findet Ihr jeweils im verknüpften Artikel.

nx-tubeflix Module

nx-tubeflix

Dein Youtube Channel auf Deiner Seite

nx-tubeflix ermöglicht es dir deinen Youtube Channel auf deiner Webseite einzubinden. Die Integration der Youtube Data API macht es möglich das sich das Modul nahtlos in das Design deiner Webseite einpflegen lässt.
Durch das setzen individueller Klassen für Titel & Texte erstrahlt das Modul ganz im von dir gewünschten Glanz.

High Performance

Das Modul nutzt für Channels, Playlist und Video Informationen dedizierte Cache Files um Anfragen an die Youtube Data API auf ein Minimum zu reduzieren.
Derselbe Cache führt aber auch dazu das deine Seite blitzschnell lädt.

Voll Responsive

nx-tubeflix wechselt bei kleinen Displays direkt in den ResponsiveMode - Die Playlist Inhalte werden dann als Liste dargestellt & der Headbereich wird ausgeblendet.
Auf Desktops kann die Recommendet Section eingeblendet werden. Hier kann als Hintergrund entweder das letzte Video des Channels, ein eigenes Video oder eine Slideshow von Bildern (mit Kenburns Effekt) als Hintergrund verwendet werden.

Demo ansehen

  • nx-tubeflix on Notebook mit limited Header
  • nx-tubeflix Another Tablet View
  • nx-tubeflix | Alternative Screen
  • nx-tubeflix auf Tablets

  • nx-tubeflix auf Desktops

Breite Konfigurationsmöglichkeiten

Basic Settings


  • Youtube API Key (v3)

    Zwingend nötig für den Betrieb des Moduls. Du musst Dir einen (gratis) Youtube API Key für Server holen.
  • Your Channel-ID

    Die ID des Channels welchen Du auf Deiner Seite darstellen möchtest
  • Youtube Player Type

    Das Modul kann entweder den Standard Player (inkl. der cookies) laden oder den so genannten "no-Cookie" Player - dieser sollte im Sinne eines optimierten Datenschutz für Deine Besucher genutzt werden.
  • max Playlists

    Anzahl der Playlists die geladen werden sollen.
  • Cachetime Channel

    Gültigkeitsdauer der Zwischengespeicherten Channel Informationen. Wird die Seite nach Ablauf des Caches neu geladen werden neue Files auf dem Server erstellt. Hinweis: Es handelt sich hier um die Channelinformationen. Keine Nutzerdaten. Du findest die Dateien (im txt Format) im Cache Verzeichnis Deiner Joomla! Installation.
  • max Videos

    Maximale Anzahl Videos per Playlist. Wird dieser Wert geändert muss. ggf. der Cache der Seite geleert werden
  • Cachetime Playlists

    Gültigkeitsdauer der Zwischengespeicherten Playlist & Video Informationen. Wird die Seite nach Ablauf des Caches neu geladen werden neue Files auf dem Server erstellt. Hinweis: Es handelt sich hier um die Playlist- und Videoinformationen. Keine Nutzerdaten. Du findest die Dateien (im txt Format) im Cache Verzeichnis Deiner Joomla! Installation.
  • Load UIkit (3x)

    UIkit (von Yootheme) wird für das LAyout verwendet. Das Framework muss durch das Modul geladen werden - Wird das Yootheme Pro Template System verwendet kann das laden innerhalb des Moduls deaktiviert werden.

Video Parameters


  • Loop

    Definiere ob Videos die abgespielt werden in Endloswiedergabe laufen sollen.
  • Inline Playback

    Definiert ob das Video auf mobilen Geräten (welche die Funktion unterstützen) innerhalb der Seite - also auch im PopUp dargestellt werden sollen.

Styling


  • Background Color

    Wähle hier die Farbe für den nx-tubeflix Container.
  • Text Style

    Es stehen zwei Text Styles zur Verfügung. Für helle Hintergründe sollte dunkel verwendet werden & vice versa.
  • Modal Size

    Das Modul bietet drei verschiedene Modal Grössen:
    • normal
    • gross
    • Fullscreen

Recommendet Section


  • Show Recommendet

    Wir können die Recommendet Section (also den kompletten Head-Bereich) auch auf Desktops fix ausblenden.
  • Container Breite

    Die Breite des Inhaltsbereichs der Recommendet Section kann in 5 Stufen angepasst werden.
  • Container Position

    Der Inhalts-Container kann mittels zwei Optionen horizontal & vertikal ausgerichtet werden
  • Container Padding

    Das Padding des Inhaltscontainers.
  • Recommendet Video Source

    Das letzte Video des Channels (Upload auf den Channel) oder eigene Video ID.
  • Background

    Video oder Bilder - Slideshow
  • Video Start & Endtime

    Wird ein Video als Hintergrund genutzt so kann hier der Start & Endzeitpunkt in Milisekunden eingetragen werden.
  • Image Source Folder

    Ordner im Pfad ./images/ in welchem sich die Bilder für die Slideshow befinden.
  • Randomize

    Sollen die Bilder nach Dateiname oder zufällig sortiert dargestellt werden?
  • Classes

    Feld für persönliche CSS Klassen welche auf dem Hintergrund DIV angewendet werden sollen.
  • Kenburns & reversed

    Soll ein Kenburns Effekt für die Slideshow verwendet werden? -> Dieser kann mit der Option REversed auch umgekehrt werden.
  • Origin

    Kenburns Ursprung der Animation.
  • Animation Speed

    Dauer wie lange ein Bild angezeigt werden soll.

Recommendet Video Info


  • Opacity

    Start Opacity Wert
  • Opacity Endwert

    Opacity Wert bei Hover
  • Recommendet Introtext

    Introtext - wird vor dem Videotitel angezeigt wird
  • Tags für Recommendet Text & Title

    HTML Tag der Titel im Recommendet Bereich
  • Klassen für Recommendet Text & Title

    Feld für zus. Klassen der Titel im Recommendet Bereich

Playlist Section


  • Playlist Style

    Playlist Videos als Grid (mehrere Zeilen) oder Slider anzeigen.
  • Spalten

    Spaltenkonfiguration für Grid und Slider - wie viele Elemente sollen auf einer Zeile dargestellt werden.
  • Video Datum anzeigen

    Zeigt das Video Datum Info (wann zur Playlist hinzugefügt oder wann auf Youtube geladen) an oder blendet diese aus.
  • Video Datum

    Definiert welches Datum angezeigt werden soll. Wann das Video zur Playlist hinzugefügt wurde oder wann das Video auf Youtube geladen wurde.

How to get the Youtube API Key

  1. Go to https://developers.google.com/ and log in or create an account, if necessary.
  2. After logging in go to this link https://console.developers.google.com/project and click on the blue CREATE PROJECT button as depicted in the photo below. Wait a moment as google prepares your project.
  3. Fill in whatever Project Name you want.
  4. Then click GoogleAPIs link in the top left corner and then click the link option called “YouTube Data API.” It’s under YouTube API’s. You can see it highlighted in the photo below, bottom right.
  5. Now click on the “ENABLE” button.
  6. Next click on the blue ‘Go to Credentials’ button to the right.
  7. Choose the select option YouTube Data API v3 for the first select option and Web server(e.g. node js. Tomcat) for the second selection. Then choose Public data. Now click the blue button, “What credentials do I need?.”
  8. Almost done, wait for google to create your new project and you should see the screen where you can copy your API Key.
  9. Paste the API Key in our nx-tubeflix Module Settings Base Configuration screen.

Download

Projekt auf GitHub

zum Projekt auf GitHub

Gratis Download

nx-tubeflix latest Version

nx-YouTube Custom Field

25% right:
Bkj3IVIO2Os

Auf dieser Seite wird das  nx-YouTube Custom Field für das einbinden eines YouTube Videos verwendet.

Das Plugin kann ein YouTube Video vor oder nach dem Inhalt ausgeben. Zusätzlich können pro Element diverse Layouteinstellungen angepasst werden.

Das nx-YouTube Custom Field Plugin kannst du gratis von GitHub herunterladen und auf deiner Webseite nutzen.

Player als Custom Field eingebunden


100% Breite:
OBkty9qjVsw
50% Centered mit Shadow:
xnYAJBV-Le8

Kontakt

Marco Rensch
Glashüttenweg 30
8887 Mels
This email address is being protected from spambots. You need JavaScript enabled to view it.

Technik

Webseite basierend auf Joomla!
Template erstellt mit uikit
Symbolbilder von unsplash.com