Hintergrundvideo in die unterste Ebene

  • HTML

Es gibt 1 Antwort in diesem Thema. Der letzte Beitrag () ist von xored.

    Hintergrundvideo in die unterste Ebene

    Hallo,

    ich möchte gerne ein mp4-Video als Hintergrund haben.
    Hatte vorher immer ein normales JPG, aber das ist langweilig.
    Habe also ein Bild genommen und Partikel drüber gepackt und als MP4 gerendert. Sieht auch gut aus.
    Also habe ich eine Methode gefunden, mit der man ein MP4-Video als Hintergrund benutzen kann.

    Code:


    HTML-Quellcode

    1. <style>
    3. video#bgvid{
    4. min-width:100%;
    5. min-height:100%;
    6. width:auto;
    7. height:auto;
    8. background: url(assets/images/section-1.jpg) no-repeat top center;
    9. background-size:cover;
    10. -webkit-background-size: cover;
    11. -moz-background-size: cover;
    12. -o-background-size: cover;
    13. }
    15. </style>
    17. <video id="bgvid" autoplay poster="assets/images/section-1.jpg">
    19. <source src="media/Animated1.mp4" type="video/mp4" />
    21. </video>


    Dies klappt auch, allerdings habe ich vorher natürlich auch Inhalt auf meiner Seite gehabt. Der Code vorher mit dem statischen JPG Bild:


    HTML-Quellcode

    1. <style>.home-section {
    2. position: relative;
    3. background-color: #fff;
    4. background-repeat: no-repeat;
    5. background-position: center center;
    6. width: 100%;
    7. z-index: 0;
    8. background-size: cover;
    9. }</style>
    12. <section class="home-section home-parallax home-fade home-full-height bg-dark-30" id="home" data-background="assets/images/section-1.jpg">
    13. <div class="titan-caption">
    14. <div class="caption-content">
    15. <div class="font-alt mb-30 titan-title-size-1">Hello &amp; welcome</div>
    16. </div>
    17. </div>
    18. </div>
    19. </section>



    Nun habe ich das Problem, dass wenn ich das animierte Hintergrundbild nehme, ich den Rest in der Section nicht mehr sehe, oder weiter unten und deformiert.

    Probiert habe ich folgendes:

    HTML-Quellcode

    1. <style>
    3. video#bgvid{
    4. min-width:100%;
    5. min-height:100%;
    6. width:auto;
    7. height:auto;
    8. background: url(assets/images/section-1.jpg) no-repeat top center;
    9. background-size:cover;
    10. -webkit-background-size: cover;
    11. -moz-background-size: cover;
    12. -o-background-size: cover;
    13. }
    15. </style>
    17. <video id="bgvid" autoplay poster="assets/images/section-1.jpg">
    19. <div class="titan-caption">
    20. <div class="caption-content">
    21. <div class="font-alt mb-30 titan-title-size-1">Hello &amp; welcome</div>
    23. </div>
    24. </div>
    26. </div>
    27. <source src="media/Animated1.mp4" type="video/mp4" />
    29. </video>


    Hat jemand eine Idee, wie ich das Video komplett in den Hintergrund packe und den Inhalt der Section wie gewohnt sehe?

    Danke :)


    Meine Website:
    www.renebischof.de

    Meine erste App (Android):
    PartyPalooza

    Habs selbst geschafft:


    HTML-Quellcode

    1. ​<?php if(is_ios() == false) { ?>
    2. <section class="home-section home-parallax home-fade home-full-height bg-dark-30" id="home">
    3. <section class="content">
    4. <div class="titan-caption">
    5. <div class="caption-content">
    6. <div class="font-alt mb-30 titan-title-size-1">Hello &amp; welcome</div>
    7. </div>
    8. </div>
    9. </div>
    10. </section><!-- /content -->
    11. <video controls loop id="my-video" class="video" >
    12. <source src="media/Animated1.mp4" type="video/mp4">
    13. </video><!-- /video -->
    14. <?php } ?>


    Meine Website:
    www.renebischof.de

    Meine erste App (Android):
    PartyPalooza

Facebook
Telefonspende