Ankündigung

Einklappen
Keine Ankündigung bisher.

Text über mp4 Video

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Text über mp4 Video

    Hi,

    ich tue mir etwas schwer und würde mich über Hilfe freuen.
    Momentan erstelle ich eine Start Seite in Wordpress. Dort soll oben ein Video (.mp4) laufen.
    Darüber will ich ein Text legen.
    Ich bekomme das aber responsive nicht hin.

    Demo: https://www.dl2fbo.de

    Auf meiner alten Seite mit Bootstrap hatte ich das hinbekommen https://test.dl2fbo.de
    Jetzt ohne Bootstrap tue ich mir weh.

    Alter Code
    HTML-Code:
    /* CSS für Video auf Startseite */
    header {
      position: relative;
      background-color: black;
      height: 75vh;
      min-height: 25rem;
      width: 100%;
      overflow: hidden;
    }
    
    header video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: 0;
      -ms-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
    }
    
    header .container {
      position: relative;
      z-index: 2;
    }
    
    header .overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: black;
    //  opacity: 0.5;
      z-index: 1;
    }
    
    @media (pointer: coarse) and (hover: none) {
      header {
        background: url('img/antenna1280.jpg') black no-repeat center center scroll;
      }
      header video {
        display: none;
      }
    }
    </style>
    </head>
    
     <body>
    
            <header>
                <div class="overlay"/>
                <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
                    <source src="img/world-1992small.mp4" type="video/mp4">
                    </video>
                    <div class="container h-100">
                        <div class="d-flex h-100 text-center align-items-center">
                            <div class="w-100 text-white">
                                <a style="font-size: 10vw; color:cyan;">Amateurfunk</a>
                                <p class="lead mb-0" style="font-size:25px;">ein Weltum<b style="color:red;">spannendes</b> Hobby</p>
                            </div>
                        </div>
                    </div>
                </header>
    
    </body>
    In WP habe ich folgendes CSS für den Text:
    HTML-Code:
    .video_head{
    font-size: 10vw;
    position:absolute;
    top:560px;
    z-index:1;
    height: 100%;
    width: 100%!important;
    color: white;
    text-align:center;
    }

  • #2
    Nachdem noch mal in mich gegangen bin, habe ich eine passable Lösung gefunden.

    HTML-Code:
    <style>
    .video-container {
      position: relative;
    }
    video {
      height: auto;
      vertical-align: middle;
      width: 100%;
    }
    .overlay-desc {
      background: rgba(0,0,0,0);
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    </style>
    
    <div class="video-container">
         <video autoplay="" loop="" muted="">
            <source src="/wp-admin/images/world-1992small.mp4" type="video/mp4">
            Your browser does not support the video tag.
         </video>
         <div class="overlay-desc">
            <p style="text-align: center;">
            <a style="font-size:9vw; color: white;">Amateurfunk</a><br>
            <a style="font-size:4vw; color: white;">ein Weltum<b style="color:red;">spannendes</b> Hobby</a>
            </p>
         </div>
    </div>

    Kommentar

    Lädt...
    X