Video for Mobile

1 reply · opened Nov 25, 2017

RRos777Nov 25, 2017

Hello!
Firstly, thank you for a splendid and very comprehensive template. Love working with it!
I went live with a client's website (www.3dtours.co.za) and saw that the video background has difficulty playing on mobile. Now from other threads I see that mobiles don't autoplay, and I get that - so I used a button / overlay image. However, when I press the play button, it starts playing very briefly in a new window and then I have a black screen with no video playing at all.

According to another thread on the same issue, apparently this can be rectified by means of video layers? You emailed someone else some code fixes. Could I ask you to please do the same for me? I'm not sure how video layers will make the video appear - but if it doesn't look right, or if my client doesn't approve the play, then I would like to hide the video PLUS the play button - but only on mobile devices. Would this even be possible?

So, in order of importance:

  1. Getting the video to play - even if it pops up in a new window.
  2. Ideally, playing the video as part of the slider - ie. not in a pop-up / new window.
  3. If point 2 is not possible, option to hide video + button on mobile devices.

I look forward to hearing from you at soonest.
Kind regards
Ros

SSemicolon WebSTAFFDec 2, 2017

Hello,

Thank You so much for your Patience!

We have gone through this thoroughly and worked out on a solution for this. Consider find the following code in the one-page/op-video-event.html File:

[](#)

and replace it with:

[](#)[](images/videos/1.mp4)

What we have done in the above code is duplicated the Play Button and link the Second Play Button to the Video directly. We have also added the Bootstrap Responsive Classes to the Play Buttons so that they are shown appropriately on Mobile and Desktop Devices. This is working perfectly fine for us so you can simply apply this to your Codes.

Hope this Helps!

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

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