Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

201
Views
How to autoplay any iframe video if it is in the viewport

there developers I'm actually in a bit of a problem I'm trying to make stuff something like if the iframe is in the viewport then video will autoplay

Condition

  1. Iframe is in viewport then video will play
  2. iframe video get paused if it is not in the viewport
  3. iframe video get paused if any modal open

    function playvideo(iframe) {
      iframe.contentWindow.postMessage(
        '{"event":"command","func":"playVideo","args":""}',
        '*'
      )
    }
    
    function pausevideo(iframe) {
      iframe.contentWindow.postMessage(
        '{"event":"command","func":"pauseVideo","args":""}',
        '*'
      )
    }
    let observeroptions = {
      root: null,
      rootMargin: '0px',
      threshold: 1.0
    };
    
    let callback = (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          playvideo(entry.target)
        } else {
          // pausevideo(entry.target);
          observer.unobserve(entry.target)
        }
      })
    }
    let observer = new IntersectionObserver(callback, observeroptions);
    
    $(window).scroll(function () {
      $('iframe').each(function (e) {
        if ($(this).isInViewport()) {
          observer.observe($(this)[0])
        }
      })
    })
This is my website link

https://letscodeon.me/research.php?category=videos

Problem The problem is that video is getting paused when the page reload it is not autoplaying when it is in viewport If i play one video then autoplay is working if i'm opening a modal then back video is not getting paused

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!