blogging | Jak na Youtube přehrávač na blogger

22. 8. 2015

Krásnou sobotu všem!
Dnes vám přináším první článek ze série Jak na blogger nebo youtube, kde vám vždy ukážu vždy pár typů, jak udělat váš blog nebo youtube zajímavější, přehlednější,hezčí nebo třeba jak já si organizuju blog, jak založit doménu atd. Dnes vám tedy ukážu, jak na váš blog přidat do postranní lišty jedno z vašich YT videí nebo jak umístit tlačítko pro odběr. Budu se snažit vám vše ukázat co nejpodrobněji, ale pokud byste měli nějaký dotaz, určitě se ptejte, ráda odpovím.

Jak na videopřehrávač
Po tom, jak umístit přehrávač na blog jsem pátrala už dlouhou dobu. Nakonec jsem našla poměrně složitý návod v angličtině ZDE (kde najdete i další detaily nastavení) a rozhodla jsem se vám to ulehčit a napsat vám zjednodušenou verzi v češtině.

1. Jediné co budete potřebovat je tento HTML kód, který pak vložíte do postranního panelu jako HTML/Javascript na váš blog (viz krok č.4 v Jak přidat tlačítko pro odběr)
<!DOCTYPE html>
<html>
  <body>
    <div id="player"></div>

    <script>
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
        event.target.playVideo();
      }
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>
V tomto kódu si pak stačí upravit výšku (height), šířku (width) - čísla jsou v megapixelech přehrávače a vybrat video, které chcete, aby se vám přehrávalo. To najdete pod pojmem VideoId, kde změníte písmena a číslice v uvozovkách ('M7lc1UVf-VE')-uvozovky ponechejte! Na youtube si vyberete video které chcete přehrát a do uvozovek napíšete jeho ID. Jak ID najít vidíte na obrázku níže.

Pokud jste dodržely pokyny, objeví se vám v postranním panelu video, které se hned po rozbalení stránky začne samo přehrávat (POZOR! i se zvukem!), přehraje prvních 6 sekund videa a pak se přehrávač zastaví. Pokud chcete upravit délku přehrávání stačí upravit číslo 6 v HTML zápisu (setTimeout(stopVideo, 6000)). Pokud chcete aby se video nezačalo přehrávat vůbec, třeba jako na mém blogu, místo 6 napište 0
A máte hotovo!

Jak přidat tlačítko pro odběr
Všechno se vlastně bude odehrávat na TÉTO stránce a je to vlastně úplně jednoduché. Vyplníte a vyberete si potřebné údaje a jejich HTML zápis zkopírujete na blog, ale začněme popořádku. 

1. Po kliknutí na odkaz se vám objeví takováto stránku. Teď už stačí zadat ID vašeho kanálu (kde ho najdete je ukázáno na obrázku níže) a vybrat si, jak chcete aby vaše tlačítko vypadalo. Vybrat si můžete ze čtyř variant - s počtem odběratelů a nebo s fotkou (modrý čtvereček s bílým znakem).


2. Zde najdete ID kanálu.

3. Všechny čtyři možnosti vzhledu tlačítka.


4. Teď už stačí přejít na bloggeru na rozvržení / přidat gadget / vyberte HTML/JavaScript a do okénka, které je zobrazeno níže zkopírujte kód, který se vám objevil po zadání vašich údajů na zmiňované internetové stránce v okně Code ( první obrázek-HTML kód) a potvrďte uložením.


Líbil se vám dnešní článek? Chtěli byste příště návod na něco konkrétního?

Okomentovat

Clara in style © . Design by Berenica Designs.