Größe für Videos automatisch auf Geräte anpassen HTML?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik
26.12.2021, 03:52

Du benötigst eigentlich nichts weiter als ein oder zwei Zeilen CSS, damit sich ein Video, ein Bild oder eine Grafik an den Viewport anpasst. Wenn es doch einmal Geräte-spezifische Formatierungen geben soll, sind Media Queries dein Freund.

HTML5:

<video src="path/video.mp4">
</video>

CSS:

video {
  width: 100%;
  height: auto;
}

/* Media Queries */
@media (max-width: 20em) { ... }
@media (orientation: landscape) { ... }
@media (orientation: portrait) {...}

Mehr Informationen zum <video> Element und CSS Media Queries:

LG medmonk
AveLichtt
25.12.2021, 11:05

https://youtu.be/yU7jJ3NbPdA

Hier das müsste hier mit eigentlich gehen.
FlosTechnikwelt 
Fragesteller
 25.12.2021, 11:05

Okay danke schau es mir gleich an

0
FlosTechnikwelt 
Fragesteller
 25.12.2021, 11:22

Wie müsste ich dass hier machen?

<!DOCTYPE html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <meta name="viewport" content="width=device-width">

        <meta name="viewport" content="initial-scale=1.0">

        <title>Titel</title>

        <meta name="description" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="styles-header.css">

        <link rel="stylesheet" href="style.css">

        <link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">

    </head>

    <body>

        <header>

            <a class="logo" href="/"><img src="assets/logoftwyout.png" width="350" hight="75" alt="logo"></a>

            <nav>

                <ul class="nav__links">

                    <li><a href="#">Home</a></li>

                    <li><a href="#">About</a></li>

                </ul>

            </nav>

            <a class="cta" href="#">Account</a>

            <p class="menu cta">Menu</p>

        </header>

        <div id="mobile__menu" class="overlay">

            <a class="close">&times;</a>

            <div class="overlay__content">

                <a href="#">Home</a>

                <a href="#">About</a>

                <a href="#">Account</a>

            </div>

        </div>

        <script type="text/javascript" src="mobile.js"></script>

        <video width="1000" height="575" controls>

            <source src="https://flostechnikwelt.de/service/slowly/vid.mp4" type=video/mp4>

         

        </video>

        <p>24.12.2021          Aufrufe:</p>

        <p> </p><h1>Flos Technikwelt end</h1>

    </body>

</html>

0