Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1473091

    Hi – when in insert a code block with my own code, I am getting a bunch of wrapper tags automatically generated by Enfold.

    In my instance I am trying to make my video with this styling: width: 100%; height: 100% and object-fit:cover.
    However with the wrapper tags from Enfold, this messes all this up.

    How can I disable the automatic wrapping?

    Thanks

    <div class=”contaner avia-section-cont-open”><div class=”template-page content av-content-full alpha units”><div class=”post-entry post-entry-type-page post-entry-27″><div class=”entry-content-wrapper clearfix”>
    <section class=”avia_codeblock_section avia_code_block_0″ itemscope=”itemscope” itemtype=”https://schema.org/CreativeWork”><div class=”avia_codeblock ” itemprop=”text”>

    <section class=”vid”>
    <div class=”holder”>
    <video class=”” preload=”metadata” autoplay=”” muted=”” playsinline=”” loop=”” controls=”” id=”player_27_1266727400_788445252_html5″ src=”HDB-Motor-draft4.mp4″></video>
    </div>
    </section></div></section>
    </div></div></div><!– close content main div –></div>

    • This topic was modified 1 month, 2 weeks ago by philipe.
    #1473199

    Hey philipe,

    Thank you for the inquiry.

    Try to wrap the code block inside a color section, then set the width of the color section container to 100%. Please check the documentation below for more info:

    // https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width

    You can also apply the background video directly to the Color Section, Fullscreen Slider, or Layer Slider element.

    Best regards,
    Ismael

    #1473247
    This reply has been marked as private.
    #1473248
    This reply has been marked as private.
    #1473322

    Hi,

    Thank you for the inquiry.

    The large gap is caused by this css code:

    section.vid {
        height: 3000px!important;
    }

    Did you add it somewhere?

    Best regards,
    Ismael

    #1473329

    Hello Ismael – yes I added that code, as per the code I posted to you, you can see it in the first line. What I am trying to do is create a video scrubber scrolling effect. This requires the container to be at that height, so the scroll is tied to the video position (see rest of code). Then to remove the height so it works similarly to parallax then we use section.vid div.holder {position:sticky!important; top:0!important;}. Making the screen stick to enable the scrolling video. However the problem is that Enfold automatically generates container tags around a code block. Therefore these div containers are also being set at that height of the section.vid box. My original question was how do we insert code without the container tags being generated, which would be the cleanest method. If that is not possible, then is there another solution to make the container tags also the same size? Any ideas appreciated. Thanks, Philip.

    #1473349

    Hi,

    Thank you for the update.

    There’s no way to prevent the theme from creating the section container for orphaned elements or elements that are not wrapped in a Color Section element. You may need to adjust the script above to account for this. Unfortunately, this would require significant modifications, which are beyond the scope of support.

    Best regards,
    Ismael

    #1473438

    Can you please post the code you like to insert? Where did you see that effect you like to reproduce?
    And where do you like to insert it – as first child in #main or between other alb elements?

    why do i ask this: if it is first child inside #main you can use that filter: ava_after_main_title

    f.e.:

    add_action('ava_after_main_title', function() {
    	if ( is_page(49162)){
    		echo '<section class="vid">';
    		echo '<div class="holder">';
    		echo '<video class=" " preload="metadata" autoplay=" " muted=" " playsinline=" " loop=" " controls=" " id="player_27_1266727400_788445252_html5" src="/wp-content/uploads/Time-Lapse.mp4"></video>';
    		echo '</div>';
    		echo '</section>';
    	}
    });

    see: https://webers-testseite.de/no-wrappers/

    #1473441

    Thank you Guenni007 for your reply. It is actually within other alb elements as it may happy at various places on the page, rather than the first child of main. I like your filter thinking though. The code you have to insert is the correct code.

    I am using the following CSS, but it seems that when these div.holder and section.vid are within the surrounding tags then we end up with the large blank space below because the height of section.vid is 3000px (which is tied to the scroll action).

    Are there any other filters you know of which can help? I have tried selecting on the code block widget: Deactivate schema.org markup
    Output the code without any additional wrapper elements. (not recommended). But that doesn’t help.

    section.vid {
    height: 3000px !important; /* Maintain desired scrolling height */
    }

    section.vid div.holder {
    position: sticky !important;
    top: 0 !important;
    }

    section.vid video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

    #1473449

    well – put your code block just inside a color-section – that color section set custom class to: special-vids
    inside you got your html structure like:

    <section id="scrubs" class="vid">
    	<div class="holder">
    		<video src="/wp-content/uploads/Time-Lapse.mp4" autoplay muted loop playsinline></video>
    	</div>
    
    	<div class="story">
    		<div>
    			<h3>In the heart of Wildrise…</h3>
    		</div>
    		<div>
    			<h3>…where the breezes play.</h3>
    		</div>
    		<div>
    			<h3>We embrace the call of the wild each day.</h3>
    		</div>
    		<div>
    			<h3>Untamed places stretch,</h3>
    		</div>
    		<div>
    			<h3>vast and wide.</h3>
    		</div>
    		<div>
    			<h3>Whispering secrets of a world outside.</h3>
    		</div>
    	</div>
    </section>

    put this to your child-theme functions.php:

    function scrub_preparation_of_color_section() { 
    ?>
    <script>
    window.addEventListener("DOMContentLoaded", function () { 
    	(function($){
    		$('.avia-section.special-vids ').each(function() {
    			var vids = $(this).find('.vid').detach().html();
    			$(vids).prependTo($(this));
    			$(this).addClass('vid').find('.container').remove();
    		});
    	})(jQuery);
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'scrub_preparation_of_color_section');

    see: https://webers-testseite.de/scrubbing-videos/

    my css on that page is:

    .responsive body#top {
        overflow-x: visible;
    }
    
    #wrap_all {
        overflow: visible;
    }
    
    .avia-section.vid {
      height: 600vh;
      position: relative;
    }
    
    .avia-section.vid div.holder {
      position: sticky;
      top: var(--enfold-header-height);
    }
    
    .avia-section.vid video {
      width: 100%;
      height: 100vh;
      object-fit: cover !important;
    }
    
    .avia-section.vid div.story {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    
    .avia-section.vid div.story div {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    but i do not want to style it till the end. have a look how that is made in that video. – and how to handle the other .avia-section
    Edit: you had to adopt now the scrubbing script to its selectors. And perhaps a debounce and resize will be needed.

    you can use the embedded debounce function of enfold:

    function ava_add_custom_script(){
    ?>
    <script>
    (function($){
      function b() {
          // here comes the script …
      }
    
      $(window).on('debouncedresize', function() {
        b();
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'ava_add_custom_script');
    #1473453

    Thank you so much for this. I have started implementing but need to debug it as the video in my example (and your demo) doesn’t seem to scrub forward and backward with the scroll. I will have another look tomorrow.

    #1473454

    i didn’t implement the script. Thats why i wrote: “Edit: you had to adopt now the scrubbing script to its selectors.”
    Your question only referred to customization without additional wrappers. A little work should still be left for you.

    Edit: now i have implemented that script – but you see – bigger video files do not work – and even the current mp4 with 10sec and less resolution do not work nice ( as the demo too ). So believe me Apple realizes this effect in a different way.

    #1473487

    Thank you very much indeed for this. I will have a look at your code. I see yours is working on Safari. Are you contactable on the info@ address on your website demo?

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.