Samotné video je nejprve nutné nahrát na server Vimeo. Doporučujeme zaregistrovat si zde nový účet se jménem firmy nebo projektu. Odkaz na konkrétní video lze poté použít pro vložení přehrávače na vaši stránku pomocí tzv. iframe (vnořený rám). Tento interaktivní box s přehrávačem videa je možné dále upravovat pomocí vlastního kódu nebo lze použít editor nastavení přímo na serveru Vimeo. Možnosti úprav mohou být ovlivněny i dle toho, zda máte na Vimeo účet zdarma nebo předplacený některý z měsíčních tarifů. Video defaultně obsahuje veškeré ovládací prvky přehrávače Vimeo. Pomocí jednoduchých úprav iframe kódu lze docílit modifikací (např. odstranit ovládací prvky, video se spustí automaticky, video bude defaultně ztišeno apod.).
Návod serveru Vimeo (pouze anglicky)
https://vimeo.zendesk.com/hc/en-us/articles/224969968-Embedding-videos-overview
Pro vložení videa na web klikněte na tlačítko “sdílet / share”.
.png)
V nově otevřeném vyskakovacím okně získáte potřebný “embed” kód pro vložení videa na web. Kliknutím na tlačítko “show options” v pravém horní rohu se zobrazí pokročilý editor iframu.
.png)
V pokročilém editoru lze upravit vzhled boxu videa a jak se bude na webu chovat.
U velikosti “size” doporučujeme zaškrtnout možnost “responsive”. Box se tak bude přizpůsobovat šířce displeje na kterém je zobrazen.
V nastavení “special stuff” je možné nastavit tzv. “autoplay” (automatické spuštění videa na webu, jakmile se uživateli zobrazí) a “loop” (opakování videa ve smyčce).
Finální kód bude vypadat například takto:
<div style="padding:56.25% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder=0 src="https://player.vimeo.com/video/XXXXXXXXX?autoplay=1&loop=1&muted=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
Tento kód lze v případě potřeby modifikovat i ručně. Například pokud požadujeme, aby se video přehrávalo bez zvuku, stačí změnit “muted=0” (ne) na “muted=1” (ano) apod.
Vložení kódu na web
Takto připravený kód lze nyní vložit na web. Pro samostatný box s videem vytvořte nový textový box a v nastavení obsahu přepněte na zobrazení “zdroj”. Celý embed kód videa zkopírujte a vložte do tohoto textového pole a nastavení boxu uložte. Na webu se nyní již bude zobrazovat vybrané video.
.png)