Skocz do zawartości
PL
Szukaj na Pecetowiczu
  • Utwórz konto

Jak nałożyć tekst w HTML na film video tag


Rekomendowane odpowiedzi

Witam. Jak nałożyć jakiś tekst w html na ten film? Film jest jako tło, lecz po dodaniu tekstu pierw się pokazuje tekst, a zaraz film, a po pokazaniu filmu nie widać w ogóle tekstu.

Chciałbym, aby leciał film w tle, a na środku był napis "Przejdź do forum" itd.

http://airsoft-dolnyslask.pl/przedstrona/index.html

kod:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Video jako tło</title>

        <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0px;
            background: transparent url('img/poster.jpg') fixed no-repeat center center;
            background-size: cover;
        }

        #wrapper {
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 2;
            width: 472px;
            height: 190px;
            margin-top: -95px;
            margin-left: -236px;
        }

        #bg {
            position: fixed;
            left: 0px;
            top: 0px;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            overflow: hidden;
            z-index: 1;
        }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <img src="img/tekst.png" alt="" />
        </div>

        <video id="bg" autoplay="autoplay" loop="loop">
            <source src="video/sd.webm" type="video/webm" />
            <source src="video/sd.mp4" type="video/mp4" />
        </video>
    </body>
</html>
Odnośnik do komentarza
Udostępnij na innych stronach

Problem rozwiązany? Bo u mnie jest w porządku. Tekst jest widoczny przed filmem.

Dla lepszej widoczności zmieniłbym cieniowanie tekstu na:

text-shadow: 5px 4px 19px #000000;
Odnośnik do komentarza
Udostępnij na innych stronach

Tak, rozwiązałem sam problem, co do cieniowania tekstu - dziękuje bardzo, właśnie kombinowałem co zrobić, aby był bardziej widoczny ;)

Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

  • Dodaj nową pozycję...
  • Dodaj nową pozycję...