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

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -