Jak na automatické přehrávání videa ve WordPressu

Vkládání a přehrávání videí není v současné době pro WordPress žádný problém, zejména pak, pokud se jedná o videa nahraná na youtube. To pak stačí vložit jen kód a máme hotovo. Co ale dělat, když youtube kanál nemám a chci si při tvorbě www stránek nahrát vlastní mp4 video s funkcí autoplay? Pokud nevíte, jak na to, pak doufám, že vám pomůže můj následující článek.

Pokud chcete přidat mp4 video pomocí widgetu, můžete to udělat několika způsoby. Buď zvolíte přímo widget Video, který přesunute na příslušné místo a prostřednictvím tlačítka „Přidat video“ nahrajete příslušné video přímo do administrace vašeho redakčního systému. V tomto případě však nemáte příliš možností, jak ovlivnit chování videa a už vůnec nedocílíte automatického přehrávání.

Další možností je použít některý HTML widget (osobně jsem si velice oblíbila plugin Black Studio TinyMCE Widget, který sekci widgety rozšíří o tzv. Vizuální editor, se kterým se dobře vkládají a upravují texty) a video vložit prostřednictvím tlačítka Mediální soubory, tak, jako byste vkládali obrázek. Tento způsob už je krapet lepší, protože můžete video ovlivňovat různými divy, nicméně to pořád není ideální.

Pokud však chcete, aby se HTML videa chovala jako GIF, tj. aby se odvíjela v určité smyčce a hlavně se automaticky spustila při načtení webové stránky (tzv. funkce autoplay), pak by se vám určitě mohl hodit následující postup.

Místo použití výchozího videopřehrávače WordPress (který se nejlépe používá pro standardnější videoobsah), jsem se rozhodla použít ručně vloženého krátkého kódu: 

[videogif mp4="http://nazev_vaseho_videa.mp4"]

V prvé řadě samozřejmě nejdříve nahrajte video prostřednictvím nabídky Média do administrace vašich stránek. Následně zkopírujte výše uvedený kód text za mp4= nahraďte zkopírovanou URL adresou vašeho videa a celý kód vložíte do příslušené části webu, kde se video má nacházet (stránka, příspěvek, widget apod.). Při vkládání odkazu doporučuji přepnout do HTML editoru.

Pokud budete potřebovat video nějak stylizovat, můžete kód upravit např. takto:

[videogif mp4="http://nazev_vaseho_videa.mp4" style='width: 100%' controls='1']

Pokud jste zdárně došli až sem, pak výborně. Nyní už zbývá poslední část a to vložit příslušný kód také do souboru functions.php vaší šablony. Přejděte do nabídky Vzhled – Editor – functions.php (upozornění: před samotnou úpravou souboru functions.php důrazně doporučuji udělat si zálohu tohoto souboru, abyste v případě jakékoliv chyby mohli soubor obnovit.) a vložte nakonec následující kód:

// Video gif shortcode
function videogif($atts = [])
{
    // normalize attribute keys, lowercase
    $atts = array_change_key_case((array)$atts, CASE_LOWER);

    // override default attributes with user attributes
    $wporg_atts = shortcode_atts([
            'mp4' => $atts['mp4'],
            'style' => null,
            'controls' => False
        ], $atts);

    // build output
    $o = '';
    $o .= '<video autoplay loop muted playsinline ';
    if ($wporg_atts['controls']) $o .= 'controls ';
    $o .= 'class="videogif"';
    if (!is_null($wporg_atts['style'])) $o .= 'style="' . $wporg_atts['style'] . '" ';
    $o .= '><source src="' . $wporg_atts['mp4'] . '" type="video/mp4" />';
    $o .= '<p>Váš prohlížeč bohužel nepodporuje tento prvek videa. </p></video>';

    // return output
    return $o;
}
add_shortcode( 'videogif', 'videogif' );

Povedlo se? Výborně, gratuluji. Zbývá poslední krok. Ve výchozím nastavení používám ještě úpravu CSS stylu (Vzhled  – Editor – Style.css)

/* Center videogif by default */
.videogif {
    width: 100%;
    display:block;
    margin: 0 auto;
}

Poznámka: Celý postup byl „vypůjčen“ z webu https://wordpress.stackexchange.com/