Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Removing Vimeo controls with autoplay looped video


Tyno2

Question

Site URL: https://tynegate-films.com/

I'm trying to get an autolooped, autoplay video to work on the mobile version of my site. I want this to be different to the desktop version which is currently in the header as I'd like the video to play rather than revert to the fallback image on mobile, and also I don't like how the desktop header video gets automatically formatted for mobile - so I can made a portrait orientated version to use on mobile (which would be hidden on the desktop page).

However, I can't get the CSS to work so the Vimeo controls are totally hidden on the video. The 'tap to unmute' button, pause and video expand button always appear when first landing on the site. The code I'm using is:

<div style="padding:41.77% 0 0 0;position:relative;"><iframe mozallowfullscreen allowfullscreen src="https://player.vimeo.com/video/483975139?autoplay=1&amp;loop=1&amp;autopause=0&amp;muted=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;wmode=opaque" webkitallowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Screenshot below of how this looked.

Any help would be really appreciated to either have a mobile specific video header that doesn't use a fallback image, or fixes to the code to remove these controls

Thanks so much

 

IMG_1966.PNG

Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0

Thank you for posting this. I was able to use your code to achieve autoplay and hidden play bar upon landing on the page, but the play bar reappears on hover. Do you mind sharing how you were able to keep it hidden? 

Link to comment
  • 0
On 1/21/2021 at 8:42 PM, suzanne said:

Thank you for posting this. I was able to use your code to achieve autoplay and hidden play bar upon landing on the page, but the play bar reappears on hover. Do you mind sharing how you were able to keep it hidden? 

Have you solved this yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 1/21/2021 at 1:42 PM, suzanne said:

Thank you for posting this. I was able to use your code to achieve autoplay and hidden play bar upon landing on the page, but the play bar reappears on hover. Do you mind sharing how you were able to keep it hidden? 

I'm afraid I resorted to having it as a banner video rather than autoplay video within the page for exactly that reason (which works perfectly fine for me) - I couldn't hide the play bar. 

Link to comment
  • 0
On 1/23/2021 at 2:07 PM, tuanphan said:

Have you solved this yet?

Still haven't resolved this mobile controls issue, if you are able to help that would be really appreciated!

Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...