html - Airbnb Video Header -
Airbank has recently launched its new design, which includes a video header, I did not understand how to get it The video title is always the same proportion of the browser window, while the video remains full-width and centered.
Therefore, I have a 50% height video title in it, a vertically and horizontally focused video, no matter how big my browser window is.
HTML & lt; Video loop = "loop" preload = "auto" id = "pretzel-video" class = "play video" & gt; & Lt; Source src = "// a0.muscache.com/airbnb/static/Paris-P1-1.mp4" type = "video / mp34" & gt; & Lt; Source src = "// a0.muscache.com/airbnb/static/Paris-P1-0.webm" type = "video / webm" & gt; & Lt; / Video & gt; CSS # Pretzell-Video {Down: 0; Status: Completed; Width: 100%; } Video {Display: Inline-Block; }
I have received this little code, but it is being done completely, no matter what I am doing.
Can anyone else provide support please.
This is the basic orientation ( #hero
) on CSS that handles it . Using the full position and setting the top, left and right properties to zero, it is spread to fit the viewport.
#hero {z-index: -1; Status: Completed; Correct: 0; Left: 0; Top: 0; Height: 600px; Hidden flurry; Minimum Width: 1045px; }
Comments
Post a Comment