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

thats my old code

and heres my video code

<div class="embed-responsive embed-responsive-16by9">
<video  controls poster="">
    <source src="" type="video/mp4">

<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

still have more hight so not fit on screen


This solution should work for you:


<div class="wrapper">
    <video src="" autoplay loop></video>


.wrapper {
    overflow: hidden;
    background-image: url(;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

.wrapper video {
    object-fit: cover;

Add this code to your css file

max-width: 100%;

See fiddle:


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.