- This topic has 5 replies, 2 voices, and was last updated 8 years, 4 months ago by
.
We launched our site today and noticed that the video background on our home page is not resizing properly when the window is sized down. Please see the attached screenshot. How can we get rid of the grey bar(s) that appear on the right side and on the top of the video when the browser is smaller? Also, is there a way to display a static image on smaller screens and not the video? Perhaps, this would solve the issue?
Website: https://www.jandlmarketing.com/
Thanks in advance for your help.
Hi @press,
I hope you are well today and thank you for your question.
Could you please disable minify cache on your site so that i can troubleshoot it?
Also please try using the CSS solution shared in the following topic.
https://support.shufflehound.com/forums/topic/theme-not-being-resposive-to-mobile/#post-6839
Best regards,
Shufflehound teamHi,
Thanks for getting back to us.
We tried the solution that you proposed and it didn’t work.
We’ve disabled the minify cache.
Please let us know if you need us to do anything else.
You can display an image instead of video on mobile devices by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 800px) { iframe#VideoWorker-0 { display:none; } .sh-section-5345031d2dc21e234ef100307e3ad1e6 { background-image: url(http://www.3dtour.pt/wp-content/uploads/2017/05/Wallpaper.png) !important; background-position: 0 0; } }Please change the image URL in the above CSS code to whatever you want to display.
We were able to us that code to place a static background image on mobile. However, the grey bar issue is still occurring on desktop. I briefly had one of our Developers look at the issue and he said that it is likely an issue involving the iframe rendering differently in various view ports. He also noted that it might not be a CSS issue.
Do you have any thoughts on a solution?
I don’t see now the grey bar issue on your site.
Could you please test it clearing your browser cache and if it still occurs then share me the screenshot of it?
