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.
  • nx-tubeflix on Notebook mit limited Header
  • nx-tubeflix Another Tablet View
  • nx-tubeflix | Alternative Screen

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

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

Joomla! Debug Console

Session

Profile Information

Memory Usage

Database Queries