Leveraging CSS and JQuery to manage an iframe with a programmed autoplay feature embedded within

My presentation was created using Adobe Presenter and inserted via an iframe with autoplay enabled upon publication. This means that as soon as the page loads, the presentation begins automatically along with the audio.

Since I am unable to disable autoplay, I considered adding a play/pause button and utilizing JQuery to toggle a class between display:hidden and display:block in order to reveal and hide the presentation when needed. However, even when the iframe is hidden, the audio still initiates on page load.

Is there an alternative property in CSS that can completely remove an element and then restore it instead of just hiding it? Alternatively, does anyone have suggestions for how I can provide users with the option to start the presentation themselves?

jquerycssiframeautoplaypresenter

Answer №1

Here is a simple solution for creating a play/pause button for a video. By clicking on an element with the class .video, you can start and stop the video playback. Feel free to modify the code according to your needs.

jQuery( document ).ready(function($) {
    $('.video').click(function() {
        $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
    });
});

UPDATE
Alternatively:

jQuery(function($) {
    $('.video').on("click", function() {
        this[ this.paused ? "play" : "pause" ]();
    });
});

If you prefer using pure javascript, you can do the following:

Play:

document.getElementById('videoId').play();

Pause:

document.getElementById('videoId').pause();

Answer №2

Following extensive and intense searching, I have come to the conclusion that there is no solution to my dilemma. Although I have successfully disabled autoplay, it now requires me to download each presentation individually from the server, make changes to the XML file, and then re-upload them... And there are thousands of them.

I want to express my gratitude to those who dedicated their time pondering over this seemingly unsolvable issue.

To anyone facing a similar challenge in the future and stumbling upon this post months later, my advice is not to waste as much time as I did trying to find a workaround. Sometimes, it is better to accept defeat rather than endlessly searching for a quicker resolution.

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

Enhancing HTML "range" element with mouse scroll functionality for incrementing values in step increments

I'm working on developing a scroll feature that operates independently from the main window's scrolling function. I aim to trigger specific events in the primary window based on interactions with this separate scrollbar. The only solution I coul ...

javascriptjqueryhtmlcssd3.js

Vertical Spacing in Bootstrap 3: Eliminating Gaps Between Divs

I am looking to eliminate the gap between certain div elements and the div positioned below it. This space is created when one div is taller than another in a column. For instance, take a look at this example: http://www.bootply.com/Hc2aO5o4bG Essential ...

phpjqueryhtmlcsstwitter-bootstrap-3

Tips for updating a link's href using its text content

I need help with replacing the login link in a text, but only if it says "Log In". Occasionally it will say "My Account": <div id="Login_T4304F19B025"> <a href="/login1">Log in</a> </div> Is there a way to use jQuery to update ...

jquery

What are some secure methods for integrating iframes into an Angular 7 project?

Is there a secure method to set the URL for an iframe without bypassing security measures like using this.domsanitizer.bypassSecurityTrustResourceUrl(url)? While this approach may be flagged as a high vulnerability by tools such as Veracode, is there a w ...

javascriptangularsecurityiframewebsecurity

Wordpress payment form not auto-filling input fields with Square API

While working on my WordPress WooCommerce site, I decided to integrate Square's API. Everything was going smoothly until I encountered an issue - when setting SqPaymentForm in my plugin, only the form labels are showing up without the input fields. He ...

phpjquerywordpresssquare-connect

Can anyone recommend a tutorial for learning how to achieve this task using jQuery?

has really intrigued me and I'm eager to create something similar because it seems like a fun project. However, I am unsure of what this particular style or technique is called. Any pointers on where to find a tutorial or the name of the approach woul ...

jqueryajaxfrontend

The functionality of 'ngbPopover' in Ng-bootstrap may be affected if the parent container contains a 'transform' css property

Struggling to implement Ng-bootstrap's 'ngbPopover' functionality, I encountered a frustrating issue where the popover would not display after clicking the button. After numerous hours of troubleshooting, I was relieved to discover the root ...

cssangularng-bootstrap

Exploring the process of adding arrays to highcharts using jQuery

All my coding work has been carried out on FIDDLE I have carefully monitored all the arrays: MARKET[0], MARKET[1], MARKET[2], MARKET[3], MARKET[4], MARKET[5], MARKET[6], MARKET[7]. They display correctly in alerts. However, when I attempted to incorporate ...

javascriptjqueryarrayshighcharts

Leveraging the power of jQuery's ajax function within Asp.Net

I am relatively new to ASP and I am having trouble figuring out the correct URL to use for an ajax call in my application. When I enter http://localhost:someport/ in the browser, it is displayed. However, when I try adding specific extensions like ["index" ...

jqueryasp.netajaxasp.net-mvc-3

Receiving an ajax request to refresh the table

I'm facing an issue with an ajax call that is supposed to update a table (max) on the current page, but it doesn't seem to be working correctly. I suspect that the problem lies in the function on the initial page because the next page is not rece ...

phpjqueryajax

Choose an identifier from a CSS class

I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...

htmlcss

Choosing between an input or select using jQuery

What is the best way to target either an input or select element using jQuery? I'm working with a form and I need to access the first element that is either an input or a select. Would it be something like $('#myForm').find('input:first ...

jquery

Linking text to specific spot on image

I am seeking a solution to anchor a text input box to a specific spot on an image. Although I can achieve this using CSS, the problem arises when I resize my window and the alignment of the input box is lost. While I want to allow some resizing of the win ...

htmlcss

CSS - Ignoring Padding Causes Unexpected White Space to Appear

I am encountering a simple error, and the following address will direct you to where the issue can be seen. Why is certain parts of the header appearing white instead of the light shade of green it is set to be? It should be positioned right at the top un ...

css

Locate the nearest element below a specified element when clicked using JavaScript

I've created a dynamic form that allows users to add or delete rows, and here is the code: // HTML <div class="row"> <div class="col-xs-4"> <ul> <li><input type="checkbox"></li> <li><inpu ...

javascriptjquery

Transforming multi-layered form data into a JSON array structure for seamless integration with application/json

I'm currently developing a Laravel application and facing an issue with the $controller->wantsJson() method in the back-end. This method returns TRUE only if the content type of the request is set to application/json. jQuery.ajax({ type: ...

javascriptjqueryjsonajaxlaravel

Stylish CSS: Jagged 3-dimensional rotated text

Have a look at this Codepen to see the issue. As the text moves into the background, more aliasing appears. A screenshot taken in Chrome on macOS (similar appearance in FF & Safari): https://i.sstatic.net/n746I.png I've experimented with different ...

htmlcssantialiasing

Tips for preventing a child div from moving when scrolling towards it and creating an internal scroll with a smooth animation using either JavaScript or jQuery

Looking to add scrolling functionality with animation to a child div on my webpage? Check out this example. I attempted using JavaScript's on scroll function, but it didn't work as expected. Currently, I have it set up to trigger on click of cer ...

javascripthtmljquerycsscss-animations

Replace the facebook plugin using JQuery libraries

Does anyone know how to remove the like button on top of the 'Like box' Facebook plugin using JQuery? I have imported the like box from Facebook and I want to eliminate this like button, but Facebook does not allow me to do so. Therefore, I am t ...

javascriptjqueryfacebookhtmlplugins

Tips for keeping a Youtube video playing even after the page is refreshed

Is it possible to save the current position of a Youtube video and have it resume from that point when the page is refreshed, instead of starting from the beginning? I am considering using cookies to store the last position or utilizing GET. Although my w ...

javascriptjqueryhtmlajaxyoutube