Jump to content

Archived

This topic is now archived and is closed to further replies.

Claude203

Canvas Background Video Does Not Appear on Mobile Devices

Recommended Posts

Claude203

Hi, despite using the correct CSS to enable mobile formatting, and confirming that everything works fine in Google Dev simulator for mobile devices, in real life the background video I have set up behind our brand banner is not appearing on actual mobile devices.

 

http://www.blackfives.org

 

Using this on desktop, which works perfectly:

 

.bg-video {
transform: translate(0,0%);
-webkit-transform: scaley(1.00) translate(0,0);
-moz-transform: scaley(1.2) translate(0,5%);
-ms-transform: scaley(1.2) translate(0,5%);
}
 
Using this to set up mobile formatting:
 
@media only screen and (max-device-width: 700px) {
 
I am not doing any special formatting of the video for mobile devices at this time, because the video runs fine on the simulator.
 
Does anyone have any suggestions?
 
Thank you.

Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Danny

HI,

 

This is by design as afar as I am aware. However, I have created a ticket on our tracker for our developers to review this potential problem. If you view the DMS demo on a mobile device, the video is replaced with the an image.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Claude203
I understand why it would be by design, out of respect for possible bandwidth resource issues, but on the other hand shouldn't the end user be allowed to decide?

On the other hand, if this is indeed by design then an easy fix might be to replace the video on mobile devices with a static image. I don't think I know how to do that just yet, but if that is an option than it would be a fine alternative.

Thank you.

Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Claude203

Thank you chrisayers for this insight. I will try it but I hope the same approach works for the Canvas background.

 

 


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
chrisayers

To be honest Claude, The REVSlider is the only useful place I have for for video layers. I am the same as you on the normal canvas sections. Even in straight Bootstrap video layers have not caught up with mobile phones. What I have done to correct this is using the advanced options I create two sections make one visible to desk top and another visible to mobile. Or I simply turn off problem areas for mobile.

Share this post


Link to post
Share on other sites
Claude203

Great idea! I will try that too. Makes perfect sense. Thank you.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
chrisayers

Hey Claude for your site with the video header. Use that new Multi Menu plug in they released this week. It haas same options as the rev slider as far as your back up video/image. I have not really torn it apart yet CSS wise but seems to do what you want.

jaz.png

Share this post


Link to post
Share on other sites
Claude203

That's cool. I am not in the Pro Club so I didn't see this. Thanks for letting me know. I'll check it out. I like how it looks on your site, many possibilities. 


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites

  • Similar Content

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • jdubdigi
      By jdubdigi+
      Onepage plugin is not working on an iphone. The page does not scroll properly and sections are partially missing, any ideas what the problem could be?
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • ivaemer
      By ivaemer+
      I've got the problem with Onepage plugin ..
      First two sections - Intro and Gallery Module are not showing on iPhone and iPad...help asap please
       
       
×