Remove whitespace between last page's videos and pagination

Wishlist YouTube Gallery
1

Hi Team! Please add functionality to remove the whitespace between the videos on the last page of the feed and pagination.

It would be really helpful! For now, the support team suggests this script as a solution:

<script>
const listenerBlock = (selector, callback) => {
  if (window.innerWidth <= 768) {
    return;
  }

  const uniqueBlocks = new Set();

  const initialTargetNode = document.querySelector(selector);
  if (initialTargetNode && !uniqueBlocks.has(initialTargetNode)) {
    uniqueBlocks.add(initialTargetNode);
    callback(initialTargetNode);
  }

  const mutationObserver = new MutationObserver((mutations, observer) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (node.nodeType === Node.ELEMENT_NODE) {
          const targetNode = node.querySelector(selector);
          if (targetNode && !uniqueBlocks.has(targetNode)) {
            uniqueBlocks.add(targetNode);
            observer.disconnect();
            callback(targetNode);
          }
        }
      }
    }
  });

  mutationObserver.observe(document.body, {
    childList: true,
    subtree: true
  });
};

const createStyles = () => {
  const style = document.createElement('style');
  style.innerHTML = `
		.yottie-widget-feed-section .yottie-widget-feed-section-pagination {
			position: absolute !important;
			transition: top 0.3s;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
		.yottie-widget-feed-section {
			margin-bottom: 54px;
		}
	`;
  document.head.appendChild(style);
};

listenerBlock(
  '.elfsight-app-53b05bdf-f4d2-4902-98b6-9b9980e3303d .swiper-wrapper',
  (swiper) => {
    const pagination = document.querySelector(
      '.yottie-widget-feed-section-pagination'
    );
    createStyles();

    const mutationObserver = new MutationObserver((mutations) => {
      mutations.forEach(({ type, attributeName, target }) => {
        const isActiveSlide =
          type === 'attributes' &&
          attributeName === 'class' &&
          target.classList.contains('swiper-slide-active') &&
          target.parentNode === swiper;
        if (isActiveSlide) {
          const postsLength = target.childNodes.length;
          const heightPost = target.firstChild.offsetHeight;

          pagination.style.top = `${
            Math.ceil(postsLength / 3) * heightPost + 120
          }px`;
        }
      });
    });

    mutationObserver.observe(swiper, {
      attributes: true,
      subtree: true,
      childList: true
    });
  }
);
</script>

The script should be placed before the widget’s installation code.

1 Like
2

Hi there @Anchal_Garg :wave:

Many thanks for sharing your feedback!

We’ll try to consider this opportunity in the future. I’ll update you here if anything comes up :slightly_smiling_face: