Creating a Duplicate of an iframe with jQuery

Hey there, I have a dilemma with two divs. One is for displaying content, and the other is a video player that I want to pause and resume on scroll using jQuery.

My goal is to pause the video in the "myplayer" div on scroll and have it resume playing from the same point in the "getMyPlayer" div.

Thank you in advance.

$(window).scroll(function (event) {
   var scroll = $(window).scrollTop();
   if(scroll > 600)
   {
     $('#getMyPlayer').css('display','block');
   }
   else
   {
     $( '#myplayer' ).clone().appendTo( '#getMyPlayer' );
     $('#getMyPlayer').css('display','none'); 
   }
});
<div id="myplayer">
<iframe width="500" height="500" src="//www.ytapi.com/embed/<?php echo $yt->id ?>?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div> 
<div id="getMyPlayer"></div>
javascriptjqueryhtmlcssiframe

Answer №1

To implement iframe before using .clone(), simply add it to the selector.

$(window).scroll(function (event) {
   var scroll = $(window).scrollTop();
   /* alert(scroll);*/
   if(scroll > 600)
   {
     $('#getMyPlayer').css('display','block');
   }
   else
   {
     $( '#myplayer iframe' ).clone().appendTo( '#getMyPlayer' ); // this line is different
     $('#getMyPlayer').css('display','none'); 
   }
});

It is important to note that this code will run every time the scroll position is updated. Adding an if statement to check if it has already been copied before cloning it is recommended.

$(window).scroll(function (event) {
   var scroll = $(window).scrollTop();
   /* alert(scroll);*/
   if(scroll > 600)
   {
     $('#getMyPlayer').css('display','block');
   }
   else
   {
     if ($( '#getMyPlayer iframe' ).length === 0) {
         $( '#myplayer iframe' ).clone().appendTo( '#getMyPlayer' ); 
         $('#getMyPlayer').css('display','none'); 
     }
   }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing the webpage section without requiring a full page reload

I am currently working on a Django website and I have been trying to update a specific section of the webpage without refreshing the entire page. However, most solutions I found online didn't work for me because the part I want to update is actually i ...

javascriptjqueryhtmlajaxdjango

Is it feasible to use create-react-app as a non-administrative user account?

Every time I attempt to run npx create-react-app client, I encounter the following error: Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... npm ERR! code EPERM npm ERR! syscall sy ...

javascriptreactjsubuntunpmcreate-react-app

Designing a book-style layout using jQuery

I am currently working on a web application that needs to display its data in a book-like format. The structure of the data is as follows: Menu{ String menuName; List<String> subMenu; } To achieve this, I utilized jQuery to dynamically generate ...

javascriptjqueryangularjslayout

The closure in question received an undefined Angular parameter

Here is something similar to what I have: $scope.fetchData = function(path, save_to) { $http({method: 'GET', url: 'http://localhost:8001/www-root/' + path}). success(function(data, status, headers, config) { ...

javascriptajaxangularjs

Vue.js: click event does not trigger transform animation

I am facing a challenge with rotating an arrow icon within a dropdown menu. Despite my efforts, the rotation does not synchronize with the appearance of the dropdown menu. Here is the Vue component code snippet: <nav> <section class= ...

javascriptcssanimationvue.jsrotation

Email attachments not working in Node Mailgun

I am facing an issue with my code that is designed to send emails using Mailgun in Node. The code functions as expected and sends the email successfully; however, it fails to attach the specified files. // pdfA and pdfB are both buffers defined earlier le ...

javascriptnode.jsemailmailgun

Whenever AJAX is employed, PHP validation consistently presents an error or false outcome, regardless of the conditions being

I have a dilemma with my form. There are only two conditions: If the yourname field is empty, it should return an error. If the email field is empty, it should also return an error. However, I am getting an error even when both fields are not empty. I cann ...

phpjqueryjsonajaxvalidation

The selector often yields varying results when used in a traditional browser versus when it is utilized with Selenium

When using Firefox in the console, I can enter: $("a:contains('tekst')") and it will display: object { length: 1, ... } However, when attempting the same in firefox opened by behat with sellenium, I receive the error message: SyntaxError: An ...

javascriptseleniumfirefoxjquery-selectorsbehat

Show inline-block elements within a div that has a variable width, allowing for horizontal scrolling

Currently, my layout is as follows: https://jsfiddle.net/0r6cdwht/2/ Is there a way to enable horizontal scrolling when the items displayed inside the div overflow? I've done some research and came across a solution that suggested using white-spac ...

htmlcss

What is the best way to style output in jQuery for a specific div?

I have developed a tool for creating forms, but I am struggling to format the output neatly like pretty print. I have tried using \n and pre tags as well. allCont += "<label>"+insCleaned+"</label><input type='text' name= ...

javascriptphp

Non-Mozilla browsers facing progress dialog block due to AJAX async:false

My shopping cart provider recently made a temporary fix by adding "async:false" to the cart calculation code in order to prevent potential issues with AJAX call completion. However, this caused an unintended consequence of preventing a jquery progress dial ...

jqueryajax

Center-align the text vertically in relation to the icon

A query has arisen, regarding a div that contains text and an icon. The issue at hand is that on larger screens the text is not vertically aligned in the center. For further reference, please visit this bootply link: http://www.bootply.com/CHKeRxKOX6 http ...

htmltwitter-bootstrapcss

Issue with undefined object reference in Moment.js when making an ajax request

Currently, I am working on developing a straightforward booking calendar using Eonasdan's bootstrap-datetimepicker, which relies on the moment.js library. To incorporate localization, I have included the necessary file. My setup consists of linked pic ...

javascriptajaxmomentjsbootstrap-datetimepicker

Creating personalized Stop and Play controls for Swiper.js Autoplay feature in a React/Next project

My quest to create a Swiper in React with autoplay functionality using Swiper.js has been quite a challenge. Despite following the instructions diligently and researching extensively, I couldn't find a solution. I even tried referencing a jQuery examp ...

javascriptreactjsnext.jsswiper.js

Please indicate a width of 3 characters for the HTML input text

Is there a way to create an HTML text box that can only fit 3 characters exactly? I came across this code online: <input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/> This code creates a text box with a width of 10px ...

htmlcss

Using Angular's $http service to send a file to a web API endpoint from a post function

I'm facing an issue with uploading a javascript file or transmitting a javascript file to a post function. On the client side, I am using angularjs $http service to send the data as follows: $http({ method: "POST", ...

javascriptangularjsfile-uploadasp.net-web-api

The words spill across the navigation bar

I am facing an issue with my navbar where the text overflows and creates extra space due to a white background. I have tried resolving this for a while but haven't been successful. I need help from someone knowledgeable in this area. Here are some im ...

javascripthtmlbootstrap-5

Sequentially loading Bootstrap columns as the page loads

Is there a way to load columns one by one with a time gap when the page is loaded? Here's the code snippet that can achieve this: setTimeout(function() { $("#box1").removeClass("noDisplay"); },1000); setTimeout(function() { ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble loading environment variables in NextJS on Heroku?

I am currently utilizing NextJS and deploying my application on Heroku. When the page initially loads, I am able to retrieve data through getInitialProps without any issues. However, when trying to access this data in a regular function, I encounter an er ...

javascriptherokunext.jsdotenv

Customizing CSS in Angular Components: Taking Control of Style Overrides

I am new to working with Angular and HTML. Currently, I have two different components named componentA and componentB, each having their own .html, .css, and .ts files. In the componentA.css file, I have defined some styles like: .compA-style { font- ...

htmlcssangular