Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #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 ?

    #1231963

    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

    #1232347

    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.

    #1232801

    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/

    #1232803

    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/

    #1233063

    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.

    #1233484

    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

    #1233490

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

    #1233551

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

    #1234046

    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

    #1238753

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

    thx in advance

    #1239023

    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

    #1239028

    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 :-)

    #1239084

    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

    #1239109

    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 :-)

    #1239168

    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

    #1239171

    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)

    #1239233

    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?

    #1240388

    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

    #1286896

    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

    #1369238

    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, 2 months ago by AuroraArcus.
    #1369440

    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;
    }

    2022-10-19_003.png
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1369973

    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

    #1370026

    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

    #1370053

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

    #1370105

    Hi,

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

    Have a nice day.

    Best regards,
    Ismael

Viewing 26 posts - 1 through 26 (of 26 total)
  • The topic ‘Play video in fullscreen’ is closed to new replies.