Fullscreen background video and keep it centered

前端 未结 4 467
梦谈多话
梦谈多话 2021-01-11 17:13

I\'m trying to create a site where I have a background video playing with some HTML5. This is all working perfectly, it works just the way I want it. But I also want to keep

4条回答
  •  [愿得一人]
    2021-01-11 18:00

    This question just have been referenced into Place video with 100% height & 100% width using css or javascript

    I guess my answer for that could be the one you were looking for?

    Here's the code:

    header {
        position: relative;
        height: 100vh;
        z-index: 0;
    }
    header h1 {
        text-align: center;
        font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
        color: #fff
    }
    header video {
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
    }

    Sample Title

    And here's a working fiddle example.

    Hope it'll help someone else :)

提交回复
热议问题