Istnieje kilka opcji dodawania wideo do witryny: Dodawanie filmów z YouTube i Vimeo, Kinescope, opcja dodania bezpośredniego linku do filmu na serwerze innej firmy (wideo HTML5) oraz użycie iFrame do dodania filmu.

Jak dodawać filmy z YouTube

Filmy z YouTube można dodawać za pomocą bloków VD01 (jeden film), VD04 (wyświetlanie filmu po kliknięciu przycisku odtwarzania), VD06N (dwa filmy), VD08 (wideo i tekst), VD09 (wyskakujące wideo), VD11 (wideo z niestandardową okładką), VD12 (wideo i obraz w rzędzie), VD13 (transmisja na żywo z YouTube z czatem na żywo), VD14 (lista odtwarzania wideo), VD16 (widżet wideo), AB701 (tytuł, opis i wideo), BF402N (wideo lub obraz i formularz w dwóch kolumnach), niektóre bloki galerii, a także bloki z pełnoekranowym obrazem jako tłem(dowiedz się więcej o dodawaniu wideo jako tła).

Aby dodać wideo, wystarczy link do filmu, który jest publicznie dostępny i włączony do osadzania w witrynach innych firm w ustawieniach prywatności.

Wybierz blok, który najbardziej Ci się podoba, przejdź do jego karty Treść i wstaw link do wideo.

Jeśli chcesz, aby film był odtwarzany od określonego momentu, dodaj fragment ?start= do adresu URL i określ wymagany czas w sekundach od początku filmu. Na przykład, XEfDYMngJeE?start=5025. W tym przypadku wideo będzie odtwarzane od 5025 sekundy. Możesz szybko skopiować czas, klikając odtwarzacz prawym przyciskiem myszy i wybierając opcję "Kopiuj adres URL wideo w bieżącym czasie".

Jak dodać filmy z Vimeo

Filmy Vimeo można dodawać za pomocą bloków VD01 (jeden film), VD04 (wyświetlanie filmu po kliknięciu przycisku odtwarzania), VD06N (dwa filmy), VD08 (film i tekst), VD09 (wyskakujący film), VD11 (film z niestandardową okładką), VD12 (wideo i obraz w rzędzie), VD14 (lista odtwarzania wideo), VD16 (widżet wideo), AB701 (tytuł, opis i wideo), BF402N (wideo lub obraz i formularz w dwóch kolumnach) oraz niektóre bloki galerii, a także bloki z obrazem pełnoekranowym jako tłem.

Jeśli Twój film jest zablokowany przez ustawienia prywatności Vimeo, będzie miał dodatkową kombinację cyfr i liter na końcu linku po identyfikatorze wideo. Aby odtworzyć wideo, dodaj tę kombinację do pola Vimeo Private Link Hash.

Jak dodać wideo z serwera innej firmy (wideo HTML5)

Jeśli Twój film nie został opublikowany w wymienionych usługach hostingu wideo, możesz przesłać go na własny serwer i wstawić go za pomocą następujących bloków wideo HTML5: VD01 (jedno wideo), VD04 (wyświetlanie wideo po kliknięciu przycisku odtwarzania), VD08 (wideo i tekst), VD09 (wyskakujące wideo), VD11 (wideo z niestandardową okładką), VD12 (wideo i obraz w rzędzie), VD16 (widżet wideo), AB701 (tytuł, opis i wideo), BF402N (wideo lub obraz i formularz w dwóch kolumnach) oraz niektóre bloki galerii. Możesz również dodać wideo HTML5 jako tło na swojej stronie internetowej, używając bloków z pełnoekranowym tłem(dowiedz się więcej o dodawaniu wideo jako tła).

Aby dodać takie wideo do strony, musisz użyć plików wideo WebM i MP4. Możesz konwertować filmy do tych formatów za pomocą konwerterów online lub oprogramowania do edycji lub konwersji wideo. Następnie umieść go na hostingu i uzyskaj bezpośredni link do pliku. Pamiętaj, że najprawdopodobniej będziesz musiał skorzystać z płatnej usługi hostingu plików, ponieważ nie wszystkie usługi przechowywania plików mają taką funkcję.

Nie można przesłać pliku wideo na stronę Tilda , ale można skorzystać z usług innych firm, które zapewniają bezpośredni link do pliku.

Przejdź do zakładki Zawartość bloku wideo HTML5 i dodaj link do swoich filmów w obu formatach w wymaganych polach.

W niektórych blokach jest tylko jedno pole do dodania linku do filmu HTML5. W tym przypadku można użyć tylko jednego formatu pliku i preferowany jest MP4.

Tabela obsługi przeglądarek dla filmów MP4 → https://caniuse.com/mpeg4
Tabela obsługi przeglądarek dla filmów WebM → https://caniuse.com/webm

Jak przesłać wideo na serwer innej firmy

Aby dodać bezpośredni link do pliku w bloku wideo HTML5, należy przesłać go do usługi przechowywania plików. Opcje przechowywania w chmurze, takie jak Dysk Google lub Dropbox, nie są do tego odpowiednie, ponieważ nie zapewniają bezpośredniego linku do pliku.

W tym celu należy skorzystać z usług lub dostawców hostingu, którzy oferują usługę przechowywania plików. Przyjrzyjmy się procesowi przesyłania pliku i uzyskiwania bezpośredniego linku do niego na przykładzie Selectel.

Jak dodawać filmy Kinescope

Filmy Kinescope można dodawać za pomocą bloków VD01 (jeden film), VD04 (wyświetlanie filmu po kliknięciu przycisku odtwarzania), VD08 (film i tekst), VD09 (wyskakujący film), VD11 (film z niestandardową okładką), VD12 (film i obraz w rzędzie), VD14 (lista odtwarzania filmów), AB701 (tytuł, opis i film), BF402N (film lub obraz i formularz w dwóch kolumnach), a także niektórych bloków z pełnoekranowym obrazem jako tłem.

Aby rozpocząć pracę z Kinescope, należy zarejestrować się na stronie https://www.kinescope.com/ lub zalogować się na swoje konto.

Kliknij "Rozpocznij za darmo"

Aby przesłać wideo do Kinescope, kliknij przycisk Nowy w prawym górnym rogu, wybierz opcję "Prześlij plik" i dodaj wideo.

Aby dodać film do strony internetowej, kliknij przycisk z trzema kropkami obok filmu w Katalogu → Skopiuj link → Wklej link w zakładce Zawartość bloku w Tilda.

Jak dodać wideo za pomocą iFrame

Filmy wideo z iFrame można dodawać za pomocą bloków VD01 (jeden film wideo), VD04 (wyświetlanie filmu wideo po kliknięciu przycisku odtwarzania), VD08 (film wideo i tekst), VD09 (wyskakujący film wideo), VD11 (film wideo z niestandardową okładką), VD12 (film wideo i obraz w rzędzie), VD14 (lista odtwarzania filmów wideo), AB701 (tytuł, opis i film wideo), BF402N (film wideo lub obraz i formularz w dwóch kolumnach).

Ta opcja umożliwia dodawanie filmów z dowolnej platformy, która udostępnia kod iframe do osadzania wideo na stronie internetowej.

W przypadku tej opcji ustawienia "Autoodtwarzanie wideo" i "Wideo z wyciszonym dźwiękiem" nie będą działać. Jeśli platforma obsługująca wideo na to pozwala, można wstawić parametry Autoodtwarzanie i Wyciszenie w łączu.

Filmy w tle dla okładek i innych bloków

Możesz użyć wideo na okładce lub w innych blokach z obrazem jako tłem zamiast statycznego obrazu tła. Przejdź do zakładki Zawartość i wklej link do filmu w wymaganym polu. Możesz użyć łącza wideo YouTube lub łącza wideo HTML5, które uzyskałeś, korzystając z powyższego przewodnika.

Przykład wideo w tle

Blok z listą odtwarzania wideo

Blok listy odtwarzania znajduje się w kategorii "Wideo" → blok VD14.

Ten blok obsługuje filmy z serwisów YouTube, Vimeo i Kinescope. Aby dodać film, należy określić jego dane w następującym formacie:
Link do filmu; Tytuł filmu; Czas trwania filmu; Opis filmu

Krótkie podsumowanie dla każdego filmu na liście odtwarzania należy określić w nowym wierszu.

Widżet wideo

Widżet wideo to mały film w rogu ekranu, który może pomóc w udostępnieniu historii produktu lub usługi. Podgląd jest odtwarzany bez dźwięku, a po jego kliknięciu ładowany jest główny film z dźwiękiem.

Aby dodać widżet wideo, przejdź do kategorii Wideo i wybierz blok VD16.

Przed jego dodaniem należy przygotować i zoptymalizować wideo pod kątem sieci (za pomocą specjalnego oprogramowania lub edytorów online, takich jak Veed.io).

Następnie należy przesłać plik do usługi, która zapewnia przechowywanie wideo i dostęp do niego za pomocą bezpośredniego łącza.

Nie możesz przesłać pliku wideo na Tilda, ale możesz skorzystać z usług innych firm.

Najlepszą opcją jest przesłanie pliku na swój hosting, taki jak Selectel. Szczegółowy przewodnik →

Przejdź do zakładki Treść bloku i wklej link do głównego filmu.

Możesz opcjonalnie dodać podglądową wersję wideo. Może to pomóc użytkownikom uzyskać wstępne wyobrażenie o głównym filmie i skrócić czas ładowania strony.
Optymalny rozmiar wideo to 200px szerokości i do 5 sekund.

Możesz również określić link i tekst do przycisku w głównym filmie, jeśli Twoim celem jest zachęcenie odwiedzającego do wykonania jakiejś czynności. Jeśli nie potrzebujesz przycisku, pozostaw te pola puste.

W ustawieniach bloku można dostosować parametry widżetu, głównego otwieranego wideo i przycisków. W przypadku widżetu można określić współczynnik proporcji, szerokość i parametry obramowania, pozycję na ekranie i inne parametry. W przypadku głównego wideo można skonfigurować obramowanie, cień i parametry przycisku odtwarzania. Szerokość wideo jest zawsze stała - 560x315 dla filmów poziomych i odwrotnie - 315x560 dla filmów pionowych.

Dodawanie wideo w Zero Block

Aby dodać wideo na stronie Zero Block → kliknij przycisk (+) i dodaj element wideo → wybierz jedną z dostępnych opcji, aby dodać wideo: YouTube, Vimeo, MP4, Kinescope → wklej link do filmu lub jego ID.

Aby dodać filmy z innych serwisów, możesz skorzystać z opcji osadzania kodu HTML: Dodaj element HTML → kliknij przycisk Edytuj kod w panelu ustawień → określ kod do osadzenia odtwarzacza. Poniżej ↓ można znaleźć przykłady, jak uzyskać kod.

Wideo dla produktu w katalogu

W katalogu produktów można dodać film wideo, aby zaprezentować produkt. Aby to zrobić, przejdź do karty produktu → kliknij link "Wideo" obok dowolnego zdjęcia produktu i wstaw link do filmu z YouTube, Vimeo lub Kinescope lub jego identyfikator.

Jak dodawać filmy do kanałów

W Kanałach można dodać zarówno główny film dla postu (będzie on wyświetlany na początku postu i używany jako okładka na liście postów), jak i wstawić kilka filmów do tekstu postu w Kanałach.

Aby dodać główny film, przejdź do pola z obrazem na karcie edycji postu w Kanałach → zakładka "Wideo" i wklej link do filmu.

Wideo zostanie wyświetlone na początku wpisu.

Aby dodać wideo w tekście posta, kliknij ikonę plusa po lewej stronie → dodaj blok wideo → kliknij go i podaj link do filmu.

Klikając trzy kropki po lewej stronie bloku, można zmienić wideo.

Wideo zostanie wstawione do tekstu posta. Zapisz zmiany.

Następnie wideo zostanie wyświetlone w tekście na stronie posta.

Jak dodawać filmy przy użyciu kodu HTML

Filmy można dodawać poprzez osadzenie kodu odtwarzacza w bloku kodu HTML. Aby to zrobić, przejdź do ustawień odtwarzacza lub usługi, aby uzyskać kod do osadzenia.

W przypadku Kinescope kliknij przycisk z trzema kropkami przy filmie na liście → Embed → wybierz kod responsywny, jeśli chcesz dostosować odtwarzacz do rozmiaru ekranu lub kod stały, aby dodać mały odtwarzacz i określić jego rozmiar i położenie w skopiowanym kodzie → wklej otrzymany kod do bloku T123 z kategorii "Inne" lub w elemencie HTML w Zero Block.