Wordpress Question posted in
The official Wordpress documentation can be found here.

Bulk upload a video on multiple WordPress websites at once

I’m trying to bulk upload a video on multiple WordPress websites at once by just uploading the video on a server.

Everything is working fine except the video doesn’t load on single post’s sidebar.

The idea is that the video loads on many websites at once only when we have a video available on the server and when there’s no video available the video player hides, that’s why the video is hidden at first and then get’s visible via the script only when there’s no error on the video player.

The time() function is used to tackle the cache issue.

The script is unable to execute in single post’s sidebar only (where I actually want the video to show), as the video is getting loaded on Homepage’s sidebar and even after the content on single posts perfectly.

Code is placed using the plugin Advanced Ads and placed via it’s widget on both sidebars (Homepage sidebar and Sidebar for Posts).

Here’s the code –

<video id="video" width="100%" height="auto" poster="https://webtik.in/ads/cover.jpeg?nocache=<?php echo time(); ?>" controls style="display: none;">
  <source id="videoSource" src="https://webtik.in/ads/video.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
</video>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const checkAndInitializeVideo = () => {
    const video = document.getElementById('video');
    const videoSource = document.querySelector('#video source');

    if (video && videoSource) {
      video.addEventListener('loadedmetadata', () => {
        video.style.display = 'block';
      });

      video.addEventListener('error', () => {
        video.style.display = 'none';
      });

      videoSource.addEventListener('error', () => {
        video.style.display = 'none';
      });
    }
  };

  checkAndInitializeVideo();

  //Code above this line working perfectly

  const sidebar = document.querySelector('#secondary');
  if (sidebar) {
    const observer = new MutationObserver(() => {
      checkAndInitializeVideo();
    });

    observer.observe(sidebar, { childList: true, subtree: true });
  }
});
</script>

After Googling a bit I came to know that the sidebar is loading dynamically on single pages, hence the script is not getting executed. Any fix for this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Fixed it!

    In the previous code the only issue was the video wasn't loading on post's sidebar, as the video was hidden initially with inline css and the script which was supposed to make the video visible in case of no error, was not running in post's sidebar.

    New code -

    <video width="100%" height="auto" poster="https://webtik.in/ads/cover.jpg?nocache=<?php echo time(); ?>" controls style="display: block;" onerror="this.style.display='none';">
    <source src="https://webtik.in/ads/video.mp4?nocache=<?php echo time(); ?>" type="video/mp4" onerror="this.parentElement.style.display='none';">
</video>

    Updating the question from "Make javascript/jQuery script run after the sidebar loads dynamically" to "Bulk upload a video on multiple WordPress websites at once by just uploading the video on a server" in case anyone wants to achieve similar thing. Cheers!


  2. 0

    So either #secondary does not exist – yet – or it will never exist in the scenario you had a problem with. If it’s not existent yet, but you expect it to materialize at some point, you can do something like this:

    let interval = setInterval(function() {
  const sidebar = document.querySelector('#secondary');
  if (sidebar) {
    clearInderval(interval);
    const observer = new MutationObserver(() => {
      checkAndInitializeVideo();
    });

    observer.observe(sidebar, { childList: true, subtree: true });
  }
}, 100);

    This will check every 0.1 seconds if a sidebar exists (until it’s created). When it happens, then the initialization you wanted will occur. If it’s never added, then you will need to find out how to identify the element you intend to work with. The code above assumed that you will eventually have an element whose id is secondary.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search