Fullscreen video with sound

[croots]

Hello,
I have X Theme Pro
What is the best way to produce the follow:

1. Full screen video on page. No footer, no menu. Nothing but the video.
2. Autoplay
3. Audio
4. Play / Pause button

Thank you

[tristup]

Hi @croots,

Thanks for reaching out.
Please find the answer to the mentioned points.

1. Full-screen video on the page. No footer, no menu. Nothing but the video.
   Set the Page Template without header and footer or Slider Revolution which is blank. And then add a Video element with the adjusted width and height.

2. Autoplay
   Set the option into the Video element

3. Audio
   As per the Autoplay Policy Change, if Autoplay is enabled, you need to Mute the video.

4. Play / Pause button
   That comes by default, you can disable it if you want.

Hope it helps.
Thanks

[croots]

Thank you very much for this.

WP Engine are telling me that it would be better for performance to run the file from youtube rather than from the site. Can you advise whether what I want is achievable via youtube as the source rather than from server and second, is it advisable?

Thank you

[tristup]

Hi @croots,

It does not matter from where you are using the video, but if you are using Youtube or Vimeo it will take its aspect ratio which may not allow you to set the video full-width.

Thanks

[croots]

I have uploaded the video to the server so that there is no forced ratio. However the video is only as large as the dimensions of the file. How do I get it to be truly full width and height, i.e fill screen?

You mention in step 1, ‘adjusted width and height’ but I do not see the controls for this when I click the video element.

The layout of the page is no container, no header, no footer as you suggest.

Thanks

[prakash_s]

Hello @croots,

In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details.

• WordPress Login URL
• Admin level username and password
• Exact Page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[croots]

Thank you.
I have sent you a secure note with the credentials.
I would like the video to fill the screen, no matter the device.

Thanks

[ruenel]

Hello Cosmic Roots,

Please do the following:
1.) In your Row element, turn “OFF” the Global Container and set the width to 100%.

2.) In your Video element, find the “Frame” tab and set it to “Fixed Height” and then set the width/height to 100% and 100vh respectively.

Best Regards.

[croots]

Thank you. This has worked very well.

[croots]

One last question. Do you know how I can overlay a play / pause button in the centre of the video (desktop/mobile). The default controls, whilst fine are not suitable as they are too long. I am happy for them to remain but would like a play button in the middle like on youtube.

[tristup]

Hi @croots,

Unfortunately, there is no such option to add an overlay Play or Pause button you are trying.

Thanks

[croots]

In order to get a play button to work I have used a YouTube video as the source. However now, whilst the play button shows, it is not clickable. This relates to the URL that I sent you in my secure note. Please will you take a look? Thanks.

[tristup]

Hi @croots,

For that, you need to use the Embedded code for Youtube video. I have created a test page and added the same into the video element and it is working fine.

https://cosmicroots.co.uk/test-by-themeco/

Hope it helps.
Thanks

[croots]

I am grateful for your help. Thank you.

[tristup]

Hi @croots,

Glad that we are able to help you.

Thanks