Sizing Image/Video for mobile - responsive CSS

10 replies · opened Sep 29, 2016

JJasonJSWSep 29, 2016

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:

		

			

				          
					                    
						
                           
![attachment](images/mainlogowhite.png)
   
						
                        
						[Demo Reel](#)
					
				

				
                  
					
					
                    
				[](#)

Thank you!
Jason

SSemicolon WebSTAFFOct 1, 2016

Hello,

Thank You so much for your Patience! We have tried working on this, however the thing is that since you are using the Vimeo Video iFrame, this might not work as expected. Please follow the Steps below for a workaround:

Add the .no-fv Class to the .video-wrap Element.
Consider using the following code for your Vimeo Video iFrame:

This should fix the issue to a Large Extent. But to completely fix this issue, it is recommended to use the <video> Tag and then add your Vimeo Video's MP4 URL in the Video Source.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

JJasonJSWOct 2, 2016

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....

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

JJasonJSWOct 2, 2016

Here is the image from mobile

JJasonJSWOct 2, 2016

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

JJasonJSWOct 2, 2016

Here is my current code:

SSemicolon WebSTAFFOct 3, 2016

Hello,

We Definitely Understand your issue and have worked on it for more than 48 hours and unfortunately, this is not the way iFrames work so the Code we had provided you with is the only Solution available for iFrames. But regarding the <video> we mentioned earlier, you cannot use this URL: https://player.vimeo.com/video/177035211?&background=1 for the Video Source as it will not work and you will need to use a URL which has a MP4 Video extension: https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761 . Please check this example: https://codepen.io/mattgrosswork/pen/jrdwK .

Additionally, when we use a iFrame Video with a Width/Height Percentage, the Video iFrame resizes according to the Browser's Width/Height. So this is also not supported and you will need to retrieve a MP4 Video Format from the Vimeo API.

hope this Helps! Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

JJasonJSWOct 4, 2016

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

SSemicolon WebSTAFFOct 5, 2016

Hello,

Thank You so much for your Patience! We are more than Happy to Help you and fix any issue you face, however, this time we really apologize as we weren't able to provide you with the desirable solution.

Regarding the Image Background on Mobile Devices, it can be definitely solved by adding a Custom Background Image on the .video-wrap Element and then Hide the iFrame using the Bootstrap Responsive Classes: http://getbootstrap.com/css/#responsive-utilities on Mobile Devices. Here is an Example Code:

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

JJasonJSWOct 23, 2016

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

SSemicolon WebSTAFFOct 24, 2016

Hello,

Really Glad that your issues were resolved. Very happy to Help! Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard