how to make video fit to screen

iwant to make a fullscreen video

lately i use an image as a cover but i change my mind and i want to use video https://jsfiddle.net/fpjqh822/10/

thats my old code

and heres my video code

<div class="embed-responsive embed-responsive-16by9">
<video  controls poster="http://www.webestools.com/page/media/videoTag/BigBuckBunny.png">
    <source src="http://www.webestools.com/page/media/videoTag/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>

<div id="body2">lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue lorem ipusm dolor sue</div>

i just want to change the img to video. as you can see from the fiddle. my id test is fit to screen but the video that i want to input is not.not even fit screen not even responsive. how can i make a video fullscreen that fit to screen and responsive

the result in codepen like this with video

http://codepen.io/vicario/pen/jqBNLN

still have more hight so not fit on screen

Answers


This solution should work for you: https://jsfiddle.net/Garconis/6mscbLer/

HTML:

<div class="wrapper">
    <video src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28831/Typer.mp4" autoplay loop></video>
</div>

CSS:

.wrapper {
    width:100%;
    height:100vh;
    overflow: hidden;
    background-image: url(http://www.webestools.com/page/media/videoTag/BigBuckBunny.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.wrapper video {
    object-fit: cover;
    width:100%;
    height:100%;
}

Add this code to your css file

video{
max-width: 100%;
}

See fiddle: https://jsfiddle.net/fpjqh822/12/

Edit:

I think I should note that in your case you have to add min-width: 100%; to the video so the video will never change it's size and will be still 100% of the users screen (depending on parent div - parent div that contains video must be set to 100% too, without any margins or paddings)


Need Your Help

Update ListView, ObservableCollection

c# wpf listview mvvm observablecollection

I dont know if is coincidence or not, but after updating Visual Studio 2013 with update 5 my listview doesnt update any more. Because i am not any mvvm wpf expert please for help.