CMSMS Webapp Sjabloon 3.0 Youtube Video

CMSMS Webapp Sjabloon 3.0 Youtube Video

CMS Made Simple 1.11.x / 1.12 | 27-06-2014 | Pascal Merks | Reacties


Hier laat ik jullie zien hoe je in CMSMS Webapp Sjabloon 3.0 een Youtube video functie toevoegt. Handig als je een filmpje of Vlog wil publiceren.

 

Vervang onderstande code in het Webapp Nieuws Artikelsjabloon:

Deze code in het Artikelsjabloon webapp:

{if $entry->fields.Foto->value}
<img src="{$entry->file_location}/{$entry->fields.Foto->value}" />
{else}
<img src="{root_url}/webapp/images/news-blank.jpg" />
{/if}

 

Vervangen door deze code:

{if $entry->fields.Video->value}
<div class="video-top">{youtube file={$entry->Video}}</div>
{else if $entry->fields.Foto->value}
<img src="{$entry->file_location}/{$entry->fields.Foto->value}" />
{else}
<img src="{root_url}/webapp/images/news-blank.jpg" />
{/if}

 

Maak een nieuwe UDT aan:

Uitbreidingen \ Gebruikergefedinieerde tags \ Tag toevoegen

Naam: youtube

Code:

echo '<iframe width="640" height="360" src="//www.youtube.com/embed/' . ($params['file']) . '" frameborder="0" allowfullscreen></iframe>';

 

Maak een nieuwe Nieuws Velddefenities aan:

Velddefenitie: Video - Type:Tekstinvoer - Publiek

 

Voeg aan stylsheet "webapp-pages" deze css regel toe onder aan de groep /* media css */:

Code:

.video-top{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;width:100%;}
.video-top iframe,.video-top object,.video-top embed{position:absolute;top:0;left:0;width:100%;height:100%;}

 

Als je nu een nieuws artikel aan maakt zie je een nieuw veld "Video". Vul hier de ID van het Youtube filmpje in. Ga bij het Youtube filmpje naar Delen / Insluiten en kopier de code achter www.youtube.com/embed/ bijvoorbeeld www.youtube.com/embed/Yx_qHHw gebruik dan alleen Yx_qHHw en vul deze in het Video veld in.

Nu zie je als je de juiste Youtube ID invult het filmpje inplaats van het plaatje.

Dat was het! Veel plezier er mee.
 

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets