Sizing Image/Video for mobile - responsive CSS

Hi Semi team,

My website: jasonhan.com

I recently changed my website's main page into a playing video and something that has been bothering me is the sizing issue with responsive CSS. The video is locked by WIDTH, so when the browser is stretched, it looks perfect, but when the browser is slimmed down it looks really bad. I like the way it's resizing, but not the way it turns extremely small when the browser is slim, as the bottom part is just all black. Is there a way I can make the video not size by width after a certain point? (Like when the browser is too slim and the black bar in the bottom gets too large) I don't mind the video being cropped by the width.

Also for browsing my site on mobile, it can't play my video which is fine but I'd like to size the image to fit the whole screen, and not small with black bars in the bottom. Is there a way I can replace the image for mobile? I tried doing that but the way I coded the video, it is using vimeo, so I don't know how to overlap the vimeo with an image in mobile.

Here is the code of my slider:

		<section id="slider" class="slider-parallax full-screen force-full-screen">

			<div class="full-screen force-full-screen dark section nopadding nomargin noborder ohidden">

				<div class="container center">          
					<div class="vertical-middle ignore-header">                    
						<div class="emphasis-title">
                           <img src="images/mainlogowhite.png" alt="JH Logo">   
						</div>
                        
						<a href="#" class="button button-border button-circle" data-scrollto="#section-reel" data-easing="easeInOutExpo" data-speed="1250" data-offset="70">Demo Reel</a>
					</div>
				</div>

				<div class="video-wrap">
               <iframe src="https://player.vimeo.com/video/177035211?&background=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>   
					<div class="video-overlay" style="background: rgba(0,0,0,0.15);"></div>
				</div>	
                    
				<a href="#" data-scrollto="#section-reel" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" class="one-page-arrow"><i class="icon-angle-down infinite animated fadeInDown"></i></a>

			</div>

		</section><!-- #slider end -->

Thank you!
Jason

Thanks so much for the response. I tried the above and I liked how it centered the video but still doesn't resolve the resizing issue and the mobile image issue.

I tried to make the vimeo play in the <video> tag, but it doesn't seem to work, how would I code it so that it would work? For the video type, what would it be as it's not a webm or mp4....

<video poster="https://player.vimeo.com/video/177035211?&background=1" width="130%" height="150%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: relative; top: -30%; left: -20%;">
						<source src="https://player.vimeo.com/video/177035211?&background=1" type='video/webm' />
					</video>

I also tried adding a background-image to my video-wrap in my responsive.css under @media (max-width: 479px) to hopefully resolve this small image issue on mobile web as you can see in the screen shot... it didn't work.

Could you please help me with that?

Thanks,
Jason

Here is the image from mobile

Sorry I don't think I made it clear what my problem is: I'd like the video to stop becoming smaller after a certain point when the width of the browser gets smaller. If it can just crop the sides and play at bigger resolution that would be amazing, but currently it just keeps getting smaller and smaller

Here is my current code:

<div class="video-wrap no-fv">
 <iframe src="https://player.vimeo.com/video/177035211?&background=1" width="130%" height="150%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: relative; top: -30%; left: -20%;"></iframe>
 <div class="video-overlay" style="background: rgba(0,0,0,0.15);"></div>
 </div>

Hi,
Wow I didn't know you guys spent 48 hours! Thank you so much for trying to help, I'm okay with how it is now. I prefer using Vimeo stream as it automatically adjusts the quality according to the user's internet speed, as well as auto resolution adjust and speed of streaming so my website loads faster.

I'm assuming there is nothing we can do about the mobile picture replacement as well?

Anyway thanks a lot for your time!
Jason

Hi Semi team,

Wow this actually fixed it!! Thank you so much for your help, really appreciate it. I wish I checked this solution forum sooner.

Website is now perfect!

Best regards,
Jason