-
AuthorPosts
-
July 19, 2020 at 4:45 pm #1231568
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 #1231963Hey 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,
RikardJuly 22, 2020 at 6:48 pm #1232347Hi,
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 #1232801you 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 #1232803I 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 #1233063HI 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 #1233484Hey!
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!
IsmaelJuly 27, 2020 at 11:55 am #1233490Thank you so much! It is working.
I think a have read half of the internet for this. :)July 27, 2020 at 4:57 pm #1233551Can 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 #1234046Hi,
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,
IsmaelAugust 18, 2020 at 10:02 am #1238753hi ismael, is it possible to use my child function.php to insert the snippets?
thx in advance
August 19, 2020 at 6:48 am #1239023Hi,
@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,
IsmaelAugust 19, 2020 at 7:02 am #1239028ok, 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 #1239084Hi 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,
VictoriaAugust 19, 2020 at 10:35 am #1239109hey 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 #1239168Hi 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,
VictoriaAugust 19, 2020 at 1:25 pm #1239171ok, 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 #1239233We 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 #1240388Hi,
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,
IsmaelMarch 9, 2021 at 8:21 pm #1286896Hi,
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 advanceOctober 18, 2022 at 3:42 pm #1369238Hi,
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 rewindFullswidth Easy Slider
cant control forward or rewindVideo (media element)
cant get full width of the videoCan 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, 2 months ago by AuroraArcus.
October 19, 2022 at 5:05 pm #1369440Hi,
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,
MikeOctober 24, 2022 at 1:41 pm #1369973Hi 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
AuroraOctober 24, 2022 at 6:08 pm #1370026Hi,
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,
MikeOctober 24, 2022 at 8:53 pm #1370053works perfect Mike. Thank you and the topic can be closed :)
October 25, 2022 at 9:20 am #1370105 -
AuthorPosts
- The topic ‘Play video in fullscreen’ is closed to new replies.