Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #941638

    I’ve just installed Enfold on my dev site. I’m using WPBakery to build all the pages. All of the youtube videos are set to 16:9 aspect ratio (in WPBakery) but the display is all screwed up. Using the same WPBakery element, vimeo videos display correctly.
    Here’s a page where the issue is occuring: http://tcoyd.presswizards.com/video-test/
    Help!

    #941828

    Hey tcoyd,

    Why do you need to use a third party layout builder when there is one included for you in the theme already? We cannot provide support for third party builders.

    Best regards,
    Rikard

    #941871

    can you try this in quick css:

    .wpb_video_widget.vc_video-aspect-ratio-169 .wpb_video_wrapper {
        display: inline-flex;
    }

    maybe an !important is necessary

    Edit: this works only in firefox ( on simulation with webdevelper ) but test it please live – maybe it will work than on those browsers

    #941880

    i think there will be only a jquery solution – and that is sad it has to be a function that will check the screen width:
    Source: https://css-tricks.com/fluid-width-youtube-videos/

    this to functions.php of your child theme:
    the thing is we had to find the parent container of the youtube videos in your installation ( i suposed it could be wpb_wrapper)

    this is the only line to be adjusted: $fluidEl = $(".wpb_wrapper");

    function custom_youtube_script(){
    ?>
    <script>
      (function( $ ) {
          "use strict";
    		$(function() {
    			var $allVideos = $("iframe[src^='https://www.youtube.com']"),
    			    // The element that is fluid width
    			    $fluidEl = $(".wpb_wrapper");
    
    				$allVideos.each(function() {
    
    					$(this)
    						.data('aspectRatio', this.height / this.width)
    						.removeAttr('height')
    						.removeAttr('width');
    
    				});
    
    				$(window).resize(function() {
    
    					var newWidth = $fluidEl.width();
    					$allVideos.each(function() {
    
    						var $el = $(this);
    						$el
    							.width(newWidth)
    							.height(newWidth * $el.data('aspectRatio'));
    					});
    				}).resize();
    		});
      }(jQuery)); 
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_youtube_script');
    #941919

    The thing with those codes of youtube is that often there are width and heights information about the video – but that causes this behavior.

    if it works it will be better if we debounce this resize function.
    it is always a good advice to do
    throttling on scroll events and
    debouncing on resize events

    see here the result on left with resize function – on the right normal behavior : https://webers-testseite.de/weber/youtube-windows/

    If you resize the browser window – you will see that debouncing is working . (every 250ms the function resizes the window of the given element)

    another clou of that code is – that aspect ratio is part of the calculation !

    #941942

    Hi,

    Thanks for sharing @guenni007 :-)

    Best regards,
    Rikard

    #941987

    so here a bit optimised:

    all comes to functions.php of your child theme:

    here a debounce function – easy to use ( if you have a resize function – only replace resize with smartresize)
    here is a timing of 250ms preselected

    function add_debounce_function(){
    ?>
    <script>
    (function($,sr){
        var debounce = function (func, threshold, execAsap) {
            var timeout;
            return function debounced () {
                var obj = this, args = arguments;
                function delayed () {
                    if (!execAsap)
                        func.apply(obj, args);
                    timeout = null;
                };
                if (timeout)
                    clearTimeout(timeout);
                else if (execAsap)
                    func.apply(obj, args);
                timeout = setTimeout(delayed, threshold || 250);
            };
        }
        jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
    })(jQuery,'smartresize');
    </script>
    <?php
    }
    add_action('wp_footer', 'add_debounce_function');

    and the code now ( give to the parent container of iframe the class spezialyoutube )

    function custom_video_embed_script(){
    ?>
    <script>
      (function( $ ) {
          "use strict";
          $(function() {
          var $allVideos = $(".spezialyoutube iframe[src*='www.youtube.com']"),
          $fluidEl = $(".spezialyoutube");
          $allVideos.each(function() {
          $(this)
            .data('aspectRatio', this.height / this.width)
            .removeAttr('height')
            .removeAttr('width');
          });
    
          $(window).smartresize(function () {
          var newWidth = $fluidEl.width();
          $allVideos.each(function() {
          var $el = $(this);
              $el
              .width(newWidth)
              .height(newWidth * $el.data('aspectRatio'));
              });
            }).resize();
        });
      }(jQuery)); 
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_video_embed_script');

    see: https://webers-testseite.de/weber/youtube-windows/

    #941989

    it all based on the direct parent container of the iframe – if it is like on your test page: avia-iframe-wrap
    than replace the above lines with:

    var $allVideos = $(".avia-iframe-wrap iframe[src*='www.youtube.com']"),
    // Hier das Element hinein welches fluidieren soll
          $fluidEl = $(".avia-iframe-wrap");

    It is probably also a good idea to include these two things only on the pages that it concerns.
    if you don’t know how to – ask please

    #942130

    Hi,

    Thanks again for sharing @guenni007, much appreciated :-)

    Best regards,
    Rikard

    #944334

    If you want simple solutions, you have to be satisfied with simple requirements.

    I would have liked it if you had answered. As you have achieved now – because I like to learn from other solutions. Finally, we tried to find a solution. Since a final report on your part should already be possible.

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