Youtube in WebsiteBaker

Aktuelle Themen - Websitebaker Hilfe

Youtube Videos in WebsiteBaker zu integrieren ist dank des Quellcode-Modus im Wysiwyg keine grosses Problem.

Wer jedoch mit den einzelnen Video-Daten auch auf anderen Seiten "spielen" möchte, bspl. mit einem Snippet "die neuesten Videos", wird sehr schnell den Überblick verlieren.

Ein eigenes Modul mal schnell zu schreiben ist sicherlich nicht Jedermanns Sache, es gibt jedoch ein Paar Kniffe, mit dem man das Problem mit vorhandenen Modulen  recht schnell bewerkstelligen kann.

 

Youtube in Websitebaker

Für die einfache Einbindung und Pflege von mehreren Youtube Videos eignet sich hervorragend das Bookmarks Modul aus dem offiziellen Addons Modulverzeichnis.

Das Modul ist selbsterklärend.

 

Vorbereitung:

Die Gruppen dienen uns die Videos in div. Kategorien oder Themen zu verteilen. Bspl. Sommersport, Wintersport ...

Die Links dienen uns zu den jeweiligen Youtube Videos eigene Inhalte noch hinzuzufügen und das Video von Youtube zu laden.

Die Optionen: hier steckt der Wurm hinter der ganzen Sache. Hier werden wir die Darstellung für den Youtube-Video-Schauraum umgestalten. 

Youtube in Websitebaker

Der Video Link:

Der Titel sollte sinnvoll gewählt werden oder kann von YouTube übernommen werden

Das Bild: diesen ignorieren wir da wir durch die Einstelung später das Vorschaubild von Youtube verwenden

Den Link erfahren wir von Youtube selbst, hier verwenden wir die V-ID des Videos auf Youtube (siehe URL Bspl ...watch?v=lpEtHcG9dYQ)

Das Ziel ignorieren wir, da die Videos in einer Facebox geöffnet werden

Die Gruppe: ja klar, unter welcher Kategorie kommt das Video

Aktiv: Videos die noch nicht veröffentlicht sind tauchen auch nicht in der Liste auf

 

Youtube in Websitebaker

 

Die Optionen - Darstellung unserer Videos:

Hier kann sich jeder Webmaster austoben im Beispiel habe ich mich an die Listendarstellung an Youtube angelehnt.

 

Die Kopfzeile: Damit das Video nicht gleich zusehen ist und erst später nach "klick" in einer Facebox erscheint werden hier die Jquery und Facebox-Dateien geladen. Wer diese im Template hat muss diese nicht nocheinmal laden.

Die Schleife Links:

Zum wichtigen Kern der Videos

<td class="BMlink">
<a href="#video-[BMURL]" rel="facebox" title="[BMTITLE]">
<img class="BMlink" align="left" src="http://i4.ytimg.com/vi/[BMURL]/default.jpg"></a>
<h3 class="BMhead"><a href="#video-[BMURL]" rel="facebox" title="[BMTITLE]">[BMTITLE]</a></h3>
<p> [BMDESCRIPTION]
</p>
<a href="http://www.youtube.com/watch?v=[BMURL]" target="[BMTARGET]">YoutubeLink</a>

<div id="video-[BMURL]" style="display:none;">
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/[BMURL]" frameborder="0" allowfullscreen></iframe></div>
</td>

 

Als Anpassung an den "Youtube-Style" kann die Kopfzeile wie folgt angepasst werden

 

<link href="http://...../facebox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://.../jquery.js" type="text/javascript"></script>
<script src="http://.../facebox.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox()
    })
</script><style type="text/css">
.BMheader  {
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
}
.BMlink img {
    border: 1px solid #ccc;
padding: 3px;
margin: 3px;
}

.BMhead {
font-size: 13px;
padding: 3px;
margin: 3px;
}
</style>

 

 

Öffnen des Videos in Facebox:

Youtube Darstellung mit Facebox JS

Zuletzt geändert am: 10.03.2011 um 23:34

Zurück

Kommentare


Keine gefunden

Kommentar hinzufügen