Play video in fullscreen - Support | Kriesi.at

Viewing 26 posts - 1 through 26 (of 26 total)

Author

Posts
July 19, 2020 at 4:45 pm #1231568

longip
Participant

Hello,

I have added 2 video’s on my website and I would like to give the users the possibility to play it in full-screen.
The videos are hosted on my server (so, they are not youtube, vimeo or similar).

How can I do this please ?

July 21, 2020 at 7:36 am #1231963

Rikard
Keymaster

Hey longip,

Sorry for the late reply. You can do that with Video element in the Layout Builder, if you need it to start in full width the you use it as a background in Color Section element, or a full width slider.

Best regards,
Rikard

July 22, 2020 at 6:48 pm #1232347

longip
Participant

Hi,

Sorry, but I already use the video element and there is no full-screen control button.
Normally, any YouTube (or similar) has a square button and if you click on it that video will play full screen. This is what I want to achieve.

As you can see in the link provided in the previous post, there is not control button to play the video in full-screen.

July 23, 2020 at 8:46 pm #1232801

Guenni007
Participant

you can use the layerslider on that.
Slider should be responsive – and the video is in a layer not as background
there is a mute / unmute button and on hovering the video the controls are shown with a fullwidth button on the right.
https://webers-testseite.de/pureinstall/fullscreen-slider/

July 23, 2020 at 8:56 pm #1232803

goldengate415
Participant

I use Smart Slider plugin to give me more options for videos…. it works well:

https://www.thomashenthorne.com/61-gold-hill-grade-san-rafael/

July 24, 2020 at 8:25 pm #1233063

longip
Participant

HI Guys,

Thanks for your help.
But, we are 2020. All I am asking is a button to make the video full screen. Is this possible or not ?
All this solution are simply workaround of the main question.

July 27, 2020 at 11:38 am #1233484
Ismael
Moderator
Hey!

Sorry for the delay. The fullscreen option is not enabled by default, so you have to turn it on manually by editing the js > avia.js file around line 468:
```
 features: ['playpause','progress','current','duration','tracks','volume'],
```
Add the “fullscreen” option or teplace the code with:
```
 features: ['playpause','progress','current','duration','tracks','volume', 'fullscreen'],
```
Please don’t forget to toggle the Performance > File Compression settings after adding the code.

Cheers!
Ismael
July 27, 2020 at 11:55 am #1233490

longip
Participant

Thank you so much! It is working.
I think a have read half of the internet for this. :)

July 27, 2020 at 4:57 pm #1233551

goldengate415
Participant

Can you guys add this as an option to the video element in a future update of Enfold please? Thanks…

July 30, 2020 at 4:35 am #1234046

Ismael
Moderator

Hi,

You’re welcome! Glad it’s working. We’ll forward the thread to our channel for further considerations. Please don’t hesitate to open a new thread if you need anything else.

Best regards,
Ismael

August 18, 2020 at 10:02 am #1238753

volmering
Participant

hi ismael, is it possible to use my child function.php to insert the snippets?

thx in advance

August 19, 2020 at 6:48 am #1239023

Ismael
Moderator

Hi,

@volmering: Yes, this is possible but we don’t recommend it because you have to deregister the default avia.js file and create a copy of it in the child theme and register it back.

// https://developer.wordpress.org/reference/functions/wp_dequeue_script/
// https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Best regards,
Ismael

August 19, 2020 at 7:02 am #1239028

volmering
Participant

ok, so what must i do to make the changes in the avia.js save for the next update?

btw: i dont have any clue what you mean with “register back” and the links you sent are out of my tiny skills :-)

August 19, 2020 at 9:50 am #1239084
Victoria
Inactive Moderator
Hi volmering,

Here is how it can be done:
```
function wp_change_aviajs() {
	wp_dequeue_script( 'avia-default' );
	wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
	}
	add_action( 'wp_print_scripts', 'wp_change_aviajs', 100 );
```
If you need further assistance please let us know.
Best regards,
Victoria
August 19, 2020 at 10:35 am #1239109

volmering
Participant

hey victoria, thx.

so i have to create copy of avia.js (with the changes in the line 468) into my child folder.

then i put your snippet in the child function.php also

correct?

what happend when enfold have a change in the original avia.js in one of the next updates?

sorry for stupid questions :-)

August 19, 2020 at 1:15 pm #1239168

Victoria
Inactive Moderator

Hi volmering,

Correct.

Yes, you will need to check if there were any changes in the file in the parent theme with every update. Questions are never stupid, it’s always a chance to learn something new :)

Best regards,
Victoria

August 19, 2020 at 1:25 pm #1239171

volmering
Participant

ok, thx victoria.

i think i change the original avia.js and watch out the updates.

i cross my fingers that this small line with the fullcreen-option will part in one of the next updates :-)

the tendency is more and more to self-hosted videos (cause of dataprivacy & cockie-law in europe with f.e. youtube)

August 19, 2020 at 5:54 pm #1239233

goldengate415
Participant

We really need to get this video element updated to have full screen / lightbox… paging Gunter….. :)

As a workaround, does the video element in the WordPress block editor offer this functionality?

August 24, 2020 at 3:54 pm #1240388

Ismael
Moderator

Hi,

We have forwarded the request to our channel, so hopefully this option will get included in the next patch. For now, you have to do the modifications above.

Best regards,
Ismael

March 9, 2021 at 8:21 pm #1286896

Arne
Participant

Hi,
I want to support the request for this feature! I think a fullscreen option is a very basic and often needed function – therefore a implementation would be great.
Tanks in advance

October 18, 2022 at 3:42 pm #1369238
AuroraArcus
Participant
Hi,

I tried to with all 3 options, but cant find a solution that gives the user full width of the video and ability to control forward or rewind in the video :
Color section:
Auto plays, cant control forward or rewind

Fullswidth Easy Slider
cant control forward or rewind

Video (media element)
cant get full width of the video

Can you give me a solution for full width video, that doesnt autoplay and where the user can control forward and rewind?
- This reply was modified 2 years, 1 month ago by AuroraArcus.
October 19, 2022 at 5:05 pm #1369440
Mike
Moderator
Hi,
Thanks for the link to your page, for your video element with the “Hobbit” video this css will make it full width:
```
.responsive #top.home #after_full_slider_1 .container {
	padding: 0;
    margin: 0;
    width: 100%;
    max-width: 2560px;
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
October 24, 2022 at 1:41 pm #1369973

AuroraArcus
Participant

Hi again Mike,

well done as always:)!

After doing this, I see there is a white area between the picture and video. How do I get rid of that? Couldn’t see any padding options anywhere in the picture or video.

Kind regards
Aurora

October 24, 2022 at 6:08 pm #1370026
Mike
Moderator
Hi,
Thanks for the feedback, try adding this css:
```
.responsive #top #after_full_slider_1 .container .content {
	padding: 0;
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
October 24, 2022 at 8:53 pm #1370053

AuroraArcus
Participant

works perfect Mike. Thank you and the topic can be closed :)

October 25, 2022 at 9:20 am #1370105

Ismael
Moderator

Hi,

Great! Let us know if you have more questions. We will close this thread for now.

Have a nice day.

Best regards,
Ismael
Author

Posts