Beiträge von Rongkongcoma

  • Hintergrundvideo Fullscreen in HTML 5 Webseite

    Hurrah ... ich habs alleine geschafft. :D
    Habe einfach meinen alten Code bezüglich des Videos in der HTML-Datei integriert und die CSS-Datei so genommen wie der es auf der Webseite angibt.
    Schwupps ... liefs ohne Buttons und ähnliches.
    Supi. :)
    Trotzdem Danke für die Hilfe.


    Hier noch einmal mein jetzt funktionierender Code ... bestehend aus HTML und CSS Datei ... um ein Video im Browser-Hintegrund laufen zu lassen.
    Ohne Buttons und mit Autorun und Dauerschleife und Aspect Ratio und Zentrierung in der Browsermitte egal wie man diesen verkleinert .... in Farbe ... und Bunt.


    Die HTML-Datei:



    Und die dazugehörige CSS-Datei:




    Gruss Rongkongcoma :)

  • Hintergrundvideo Fullscreen in HTML 5 Webseite

    Danke für die Hilfe "Wolf".


    Leider werde ich immer frusstrierter da ... je weiter ich komme ... umso mehr Probleme habe.


    Die Seite die Du mir angegeben hast mit dem folgenden Link:
    http://fvsch.com/code/video-background/
    ist in der Tat hilfreich beim lösen des Problems.


    So habe ich es geschafft mit dem Code der einem dort vorgegeben wird ... bezogen auf mein Video ... das Problem zu lösen.
    Nun tut sich aber ein anderes Problem auf.


    Folgendes :


    Vorher hatte ich es mit meiner Seite wie ich es einerseits haben wollte.
    Es spielte sofort ab und lief als Dauerschleife.


    Jetzt mit der Variante von der Webseite habe ich die Proportionen und das Verhalten mit dem zentriert sein das ich mir erwünscht hatte.
    Jedoch habe ich nun das Problem das es einen Button gibt den man drücken muss damit es los geht.
    Darüber hinaus spielt es nur einmal ab.


    Wenn Du "Wolf" ... oder wer auch immer ... mir beim ausmerzen des Problems noch einmal helfen würdest ... wäre das super.


    Der Code meiner Seite sieht jetzt folgendermassen aus.


    Die HTML-Seite:


    <!DOCTYPE html>
    <html>


    <head>
    <title>BC Biz _ Hintergrundvideo</title>


    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">


    <link href="design.css" type="text/css" rel="stylesheet">
    </head>


    <body>


    <div id="video-bg">
    <video controls>
    <!-- Default video source: -->
    <source type="video/mp4" src="video.mp4"
    media="(orientation:landscape)">
    <!-- Use square video source to waste less bandwidth: -->
    <source type="video/mp4" src="video.mp4"
    media="(orientation:portrait)">
    </video>
    <!--
    Buttons or metadata go here
    -->
    </div>


    </body>


    </html>


    Die CSS-Datei:


    html, body


    #video-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    }


    #video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }


    /* 1. No object-fit support: */


    @media (min-aspect-ratio: 16/9) {
    #video-bg > video { height: 300%; top: -100%; }
    }


    @media (max-aspect-ratio: 16/9) {
    #video-bg > video { width: 300%; left: -100%; }
    }


    /* 2. If supporting object-fit, overriding (1): */


    @supports (object-fit: cover) {
    #video-bg > video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    }
    }



    Hoffe es kann mir Jemand ... den Code so verändern das der Button Weg ist und das Video als Dauerschleife abspielt.
    Dann kann ich endlich das Kapitel "wie bekomme ich ein Hintergrundvideo auf eine Webseite" abschliessen und mich dran machen endlich die Seite aufzubauen.
    Abermals wird jede Hilfe Dankend angenommen.



    LG Rongkongcoma

  • Hintergrundvideo Fullscreen in HTML 5 Webseite

    Hallo abermals.
    Ich habe nach wie vor ein Problem mit dem Thema eines Hintergrundvideos als Fullscreen in einer Webseite.
    Ich möchte ein Video als Hintergrundbild haben wie es auf folgender Webseite zu sehen ist :


    http://arttica.is/


    Grundsätzlich gibt es viele tolle Tutorials welche relativ einfach zeigen wie man das macht.
    Leider verhält sich dann meine Seite immer anders.
    Bei der oben genannten Seite ist es so ... wenn man das Browserfenster kleiner macht ... das video sich anpasst.


    Verkleiner ich das Browserfenster in der höhe passiert folgendes ... :
    Das Video geht gleichmässig oben und unten aus dem Browserfenster raus ... bleibt aber gleich gross und die Mitte des Videos bleibt mittig in der Mitte des Browserfensters.


    Verkleiner ich das Browserfenster in der Breite passiert folgendes ... :
    Das Video geht gleichmässig rechts und links aus dem Browserfenster raus ... bleibt aber gleich gross und die Mitte des Videos bleibt mittig in der Mitte des Browserfensters.


    Die Mitte des Videos bleibt also beim verkleinern des Browserfenster immer mittig zentriert und das Aspect Ratio bleibt erhalten.
    Das Video fährt an den Rändern raus aus dem Browserfenster aber das Aspect Ratio bleibt erhalten und die Mitte des Videos bleibt in der Mitte des Browserfensters.


    Die Frage ist ... welchen Code muss ich hierfür in die CSS Datei schreiben???


    Bisher konnte mir keiner helfen.


    Mein Code für das eingebundene Video in meiner Seite ist folgender :


    #video_background {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    }


    Leider verhält es sich dabei so das mein Video dann rechts und oben angeklatscht ist am Browserfenster.
    Das Video behält zwar das Aspect Ratio ... fährt aber nur links und unten raus und die Mitte des Videos bleibt nicht in der mitte des Browserfensters beim verkleinern des Browserfensters.
    Sprich wenn ich mein FullHD Video in einem verkleinerten Browser sehe ... dann sehe ich meisst nur 1/4 des videos ... und dann davon das links oben gelegene viertel.
    Ich will aber das mein Video mittig in der Mitte des Browserfensters angezeigt wird.
    Wie gesagt ... also so wie es sich oben bei der geposteten Webseite verhält.


    Wie ist das nur zu schaffen???
    Kann mir jemand einen Code posten der das ermöglicht?
    Würde mich sehr über jegliche Vorschläge freuen.



    LG Rongkongcoma

  • Frage bezüglich Hintergrundvideo in Webseite

    Hatten den eigentlich schonmal gepostet oben.
    Abermals hier mein Code der Webseite.
    Einmal die HTML und einmal die CSS.



    HTML-Datei :


    <!DOCTYPE html>
    <html>


    <head>
    <title>Rongkongcomas Seite</title>


    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">


    <link href="design.css" type="text/css" rel="stylesheet">
    </head>


    <body>


    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="movie.mp4" type="video/mp4">
    Video not supported </video>


    </body>


    </html>


    CSS-Datei :


    html, body


    {

    }


    #video_background {
    position: fixed;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    }


    Vielleicht gibts ja doch noch eine Möglichkeit die jemandem einfällt um das Video im Hintergrund zentriert darzustellen.
    Also das beim verkleinern des Browserfensters das Video kleiner wird und gleichmässig nach allen Seiten (oben links rechts unten) rausfährt und das Aspect ratio behält.

  • Frage bezüglich Hintergrundvideo in Webseite

    Das ändert immerhin das der Scrollbalken weg ist.
    Aber das Bild wandert nicht links und rechts und unten und oben gleichmässig raus aus dem Browserfenster wie beim Hintergrundbild.
    Es bleibt dabei das es nur links und unten rauswandert.
    Es soll aber gleichmässig rauswandern ringsrum und etwas kleiner werden wie beim Hintergrundbild.
    Nach wie vor leider noch nicht das gewünschte Ergebnis.

  • Frage bezüglich Hintergrundvideo in Webseite

    Hallihallo zum zweiten.


    Habe eine Frage bezüglich einer Idee eines Hintergrundvideos in meiner Webseite.
    Habe zuvor eine Frage gestellt bezüglich eines Hintergrundbildes welche von "lauras" beantwortet wurde.
    Das mit dem Hintergrundvideo ist nun ähnlich.


    Folgendes:


    Ich möchte ein Hintergrundvideo in meine Webseite unter der HTML Downloads einbinden.
    Es soll sich wie bei meiner Frage zuvor folgendermassen verhalten.
    Es soll immer im korrekten Aspect Ratio dargestellt werden .. im gesamten Hintergrunds des Browserfensters.
    Es soll unten rausgeschoben werden wenn ich das Browserfenster nach oben kleiner verschiebe aber oben nicht raus wandern.
    Wenn ich das Browserfenster jedoch seitlich zusammenschiebe soll es nicht links oder rechts verschwinden sondern soll sich verkleinern und erst irgendwann links und recht gleichmässig verschwinden.
    Also wie ich es bei einem Hintergrundbild haben wollte und geschafft habe dank folgendem Code der mir zugetragen wurde von "lauras" für die CSS-Datei:


    {
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    }


    Ich habe selber einen Code aus diversen Webseiten-tutorials herausgelesen und abgeguckt ... ähh ... ich meine ... ich wurde inspiriert.
    Foldender Code für die CSS Datei kam zutage:


    #video_background {
    position: absolute;
    top: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    }


    Der Code für die dazugehörige HTML-Datei ist folgender :


    <body>


    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
    <source src="movie.mp4" type="video/mp4">
    Video not supported </video>


    </body>


    Jetzt ist es aber so das mein Video dann zu scrollen ist weil es größer ist als meine native Auflösung von 1920x1080 und es wandert links raus wenn ich es seitlich zusammenschiebe.
    Ich möchte aber das es nicht zu scrollen ist und bei seitlichen zusammenschieben kleiner wird und irgendwann erst ... und dann gleichmässig ... links und rechts rausfährt aus dem Brwoserfenster.
    So wie bei meinem Hintergrundbild oder beispielsweise bei der Webseite http://www.titanfall.com/de bei der es sich bei deren Video auch so verhält.


    Wie mache ich das ... bzw. was muss ich am Code verändern damit ich das erreiche?
    Oder muss der Code ganz anders aussehen und ist der den ich mir da zusammengeschustert habe wieder mal murks?


    Ich hoffe auf eine helfende Antwort mit eventuell dem von mir geposteten ... dann korrigierten ... Code



    Gruss Rongkongcoma

  • Frage bezüglich Hintergrundbild in Webseite

    Dann für die Antwort "lauras".
    Die letzte Quellcode-Auflistung gefällt mir am besten und wird prompt übernommen.
    Übersichtlich wie ich mir das vorstelle .... schön geordnet und erklärend.


    Das mit dem Webocton Srcriptly ist mir nicht bewusst gewesen.
    Welche anderen kann man denn nehmen welche kostenlos sind?
    Das meisste im Netz ist mit einem Obulus verbunden oder optisch nicht so ansprechend .... oder das Gegenteil .... zu vollgestopft mit Infos und verwirrend für Anfänger und/oder optisch nicht ansprechend.
    Habe selber nur Webocton Scriptly und den NVU-Webeditor.
    Für bessere Editoren habe ich jedoch ein offenes Ohr.


    Danke jedenfalls für die Lösung des Problems. :)

  • Frage bezüglich Hintergrundbild in Webseite

    Danke "lauras" .... aber auch das hat wieder ein Problem.
    Es wird dann zwar nicht mehr unendlich dargestellt .... aber ein weisser streifen sprich der Hintergrund hinter dem Hintergrundbild wird dann dargestellt.
    Aber ich habe etwas im Netz rumgesucht und zu Deinem Quellcode etwas ergänzt und folgende Lösung gefunden :

    CSS
    html, body 
{
        background: url(background.jpg) no-repeat center center fixed;
        background-size: cover;
}


    Damit habe ich dann das was ich wollte.
    Die Frage ist nur ... was heisst das für mich?
    Es ist schön eine Lösung zu haben ... aber es wäre noch schöner wenn ich verstehen würde was da geschrieben steht.
    Ausserdem .... wenn ich mit Webocton Sriptly arbeite oder im Brwoser den Quellcode sehe ... wird mir das "background-size: cover" zum Beispiel als rot dargestellt.
    Wieso?
    Ist das falsch?
    Und wieso kennt Webocton Scriptly diesen Befehl offenbar nicht??
    Wenn ich beispielsweise eintippe <bac ..... dann gibt er mir gleich Optionen wie <background> oder ähnliches in der Liste.
    Background-size ist jedoch nicht vorhanden.
    Die Frage ist wieso???
    Warum wird einiges als grün und einiges als blau dargestellt und weniges als rot????
    Sehr verwirrend.
    Und wofür steht nach no-repeat ... center center fixed?
    Vielleicht hast Du ja eine anfängerfreundliche Erklärung.
    Wär cool.
    Das Problem ist jedenfalls gelöst.
    Danke also für den Denk- und Suchanstoss.


    Gruss Rongkongcoma

  • Frage bezüglich Hintergrundbild in Webseite

    Hallo !


    Bin neu hier und habe eine Frage und die Hoffnung auf eine Antwort.
    Ich möchte eine eigene Webseite erstellen.
    Ich habe eine konkrete Vorstellung und habe damit allerdings ein Problem.
    Folgendes ist wichtig bevor ich meine Webseite mit durchsichtigen Divs ... welche gefülllt mit Texten sein sollen ... bestücke.


    Ich möchte ein Hintergrundbild haben.
    Das ist grundsätzlich auch erstmal kein Problem.
    Allerdings habe ich genaue Vorstellungen und kann diese nicht realisieren.


    Es soll sich folgendermassen verhalten:


    Es soll zentriert dargestellt werden.
    Es soll das Seitenverhältnis behalten.
    Sprich wenn man das Browserfenster verschiebt soll es nicht verzerren und immer seine Form behalten.
    Wenn man das Browserfenster in der Breite schmaler schiebt soll es kleiner werden aber ab einem bestimmten Punkt sollen die Seiten des Bildes rechts und links aus dem Browserfenster sozusagen rausfahren.
    Das gilt auch für das Verhalten des Hintergrundbildes in der Höhe wenn das Browserfenster verkleinert wird.
    Es sollen keine Ränder oder ähnliches da sein rings um das Hintergrundbild.
    Es soll also so aussehen als wenn das Browserfenster ein Bild darstellt im Hintergrund.
    Macht man das Fenster des Browsers kleiner auf dem Desktop soll das Aspect Ratio gleich bleiben und das Bild etwas kleiner werden bis zu einem bestimmten Punkt und dann teilweise links und rechts und oben und unten aus dem Browserfenster verschwinden.
    Zumindest soll es so wirken.


    Wie kann ich das mit welchen Quellcode anstellen???


    Ich hoffe das mir jemand ein Beispiel hier postet.
    Meine HTML-Seite sieht bisher blank aus ... nämlich folgendermassen:


    Die CSS-Datei sieht so aus :


    Also wie man sieht bin ich am Anfang der Arbeit.
    Ich habe schon Ideen die ich auch realisieren könnte dank der Tutorials auf der HTML-Seminar-de-Seite.
    Aber dort finde ich bisher keine Hilfe bezüglich des Webseiten-Hintergrundes.
    Zumindest keine die das ermöglicht was ich mir vorstelle.
    Nur ein Beispiel ist dort zu sehen welches meinen Vorstellungen optisch nahekommt.
    Da ist es aber so das sich das Hintergrundbild immer verzerrt und das Aspect Ratio verliert wenn man das Browserfenster verkleinert.
    Hier der Link:


    http://www.html-seminar.de/bei…intergrund_aufspannen.htm


    Ich möchte aber das es zwar grundsätzlich so aussieht aber das Aspect Ratio behält und beim verkleinern des Browserfensters kleiner wird und irgendwann unten und seitlich rausfährt so dass es immer mittig dargestellt wird auch im verkleinertwen Browserfenster auf dem Desktop.
    Ich hoffe es ist aus meiner Erklärung klar geworden was ich meine.


    Ich hoffe auf baldige Antwort.
    Vor allem auf eine einfache Antwort.
    Mir wäre ein Post recht der den oben gelisteten Quellcode erweitert mit den nötigen Ergänzungen.
    Das Bild das im Hintergrund eingefügt werden soll trägt den Titel "website_background.jpg".
    Es ist von den Maßen her 1920x1080 wenn das wichtig sein sollte.
    Die Webseite soll auch optimiert werden für 1920x1080 er Auflösung.
    Dennoch sollte man das Browserfenster verkleinern können in der Auflösung ohne das mein Hintergrundbild verzerrt oder nicht mehr korrekt sichtbar dargestellt wird.


    Wenn das Problem gelöst ist und ich das habe was ich mir vorstelle kann ich endlich anfangen.
    Der Rest der mir so vorschwebt sollte alleine schaffbar sein.
    Die Tutorials sind sehr gut hier auf HTML-Seminar.de.
    Aber bevor ich das Hintergrundbild nicht realisiert habe macht es einfach keinen Spass weiterzumachen.
    Wenn es zu Beginn schon hapert am Hintergrundbild ist das echt frusstrierend.


    Ich bin dankbar für jeden helfenden Post.
    Am liebsten mit ergänzten Quellcode.



    Gruss Rongkongcoma