Jak vložit video na web bez využití youtube

Ne vždy je vhodné využít ve webové prezentaci youtube iframe. Například chcete video dát na úvodní stranu webu a rekalama na youtube či jeho přehrávač není zrovna to co by jste tam chtěly mít. Cesta je přez tag .

Je potřeba provést několik bodů:

1) Získat samotné video
Zde upozorňuji na to, že je vhodné mít video v několika rozměrech. Pro full hd zařízení, ale i například pro tablet či mobilní telefon (zde je třeba zvážit zda má smysl video na mobilu řešit). Důvod je ten, že na full hd monitoru bude Vaše třeba 20 vteřinové video klidně 20 MB velké. Na počítačy na rychlém internetu 20 MB není problém, ale co 20 MB na pomalejší wifině či dokonce na datech? To už je jiná a video musí být menší.

2) připravit si HTML část

V poster je obrázek pokud není načteno video.

3) Připravit si CSS část

.blok_video_home{
  position: relative;
  display: block;
  text-align: center;
  background-color: #626262;
  overflow: hidden;
}
video#bgvid {
  /*background: rgba(0, 0, 0, 0) url("../../img/img-bg.jpg") no-repeat scroll 0 0 / cover ;*/
  height: auto;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: auto;
  z-index: 0;
}
.no-borderradius video#bgvid {
  left: 0;
  top: 0;
}

Možná se divíte třídě ".no-borderradius" ta jde z jquery pluginu "modernizer", který vrací do tagu "html" třídy zda daný prohlížeč podporuje javascript či různé CSS vlastnisti. Já si přez tuto třídu (.no-borderradius) detekuji zda daný prohlížeč podporuje CSS3 pokud ne tak mám v html třídu ".no-borderradius", pokud ano tak ".borderradius"

4) Připravit jQuery část

function res_vysku_videa_home() { //zajisti at je blok s videem vysoky jako obrazovka
  var vyska_okna = $(window).outerHeight();
  $(".blok_video_home").css("height",vyska_okna+"px");
}
$( document ).ready(function() {
  res_vysku_videa_home();
  
  // posilej jinou kvalitu videa dle sirky zarizeni
  var min_sirka_1280 = window.matchMedia("(min-width: 1280px)");
  if (min_sirka_1280.matches) {
    $("#bgvid").html('' );
  }

  var min_sirka_1000 = window.matchMedia("(min-width: 1000px)");
  var max_sirka_1000 = window.matchMedia("(max-width: 1279px)");
  if ( (min_sirka_1000.matches)&&(max_sirka_1000.matches) ) {
    $("#bgvid").html('' );
  }

  var min_sirka_700 = window.matchMedia("(min-width: 700px)");
  var max_sirka_700 = window.matchMedia("(max-width: 999px)");
  if ( (min_sirka_700.matches)&&(max_sirka_700.matches) ) {
    $("#bgvid").html('' );
  }

  var min_sirka_500 = window.matchMedia("(min-width: 500px)");
  var max_sirka_500 = window.matchMedia("(max-width: 699px)");
  if ( (min_sirka_500.matches)&&(max_sirka_500.matches) ) {
    $("#bgvid").html('' );
  }

  /*var max_sirka_do_500 = window.matchMedia("(max-width: 499px)");
  if (max_sirka_do_500.matches) {
    $("#bgvid").html('' );
  }*/

  /*iPhone je schopný tag video, ac nema obsah zobrazit. Tudiz prez obrazek, ktery je videt pod 500px je kolecko s tlacitkem play.
Tento krok tuto vec resi.*/
  var sirka_okna = parseInt($(window).width());
  if ( sirka_okna <= 499 ) {
    $("#bgvid").hide();
  }
});

<< zpět