How to use Javascript to toggle a popup containing an autoplaying Vimeo video

I am looking to create a pop-up window containing a Vimeo video inside. I have a div on my webpage with an id of "showVideo". When this div is clicked, I want to display a pop-up (new div with the id of "opened-video"). The "opened-video" div contains an iframe with the Vimeo video embedded, like so:

<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

The autoplay feature is enabled for this iframe using the ?autoplay=1 parameter in the source URL.

Here is my JavaScript code:

jQuery(document).ready(function(){

    jQuery('#showVideo').click(function() {
    jQuery('#opened-video').fadeIn().html('<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><img src="<?php echo get_template_directory_uri()?>/images/resp-menu-close.png" alt="Close video" onClick="closeDiv()" id="close-video" />');
    }); 
});

This setup is currently functioning as intended.

You may notice an image tag within the html() function that serves the purpose of closing the "opened-video" section. This is achieved through a JavaScript function:

function closeDiv() {
        document.getElementById('opened-video').style.display = "none";

    }

While this method successfully hides the "opened-video" div, the Vimeo video continues playing in the background, emitting sound. How can I stop the video when clicking on the "close-video" image? Is there a way to remove the autoplay parameter (?autoplay=1) upon clicking the image? Any alternative suggestions are welcome.

Below is the HTML structure:

<img src="<?php echo get_template_directory_uri()?>/images/play-real.png" alt="Play real" id="showVideo"  />

<div class="video-front" id="opened-video">     
    </div>
javascriptjqueryhtmlcssvideo

Answer №1

When you call the closeDiv() function, be sure to include these two lines of code after setting the display to none:

$('iframe').attr('src', "");
$('iframe').attr('src', $('iframe').attr('src'));

This will modify your function as follows:

function closeDiv() {
    document.getElementById('opened-video').style.display = "none";
    // Clearing the src attribute
    $('iframe').attr('src', "");    
    // Reloading the src so it can be played again
    $('iframe').attr('src', $('iframe').attr('src'));     
}

See it in action here!

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

Having trouble retrieving alert message after submitting form using jquery

Trying to submit a form using jQuery, but when clicking on the submit button it displays a blank page. I understand that a blank page typically means the form has been submitted, but I want to show an alert() for testing purposes instead. However, it only ...

javascriptjqueryhtmlforms

display Ajax Response in dropdown selection

My task involves selecting multiple tests and dates. Upon clicking submit, the names of laboratories associated with the selected tests are loaded into a select option. Using Ajax script: $('[name=submits]').click(function(e) { e.preventDef ...

phpjqueryjsonajaxcodeigniter

A step-by-step guide on displaying content according to a template file in AngularJS

I am new to using angular js and need help with displaying specific content on a particular page of my web application. I have a HTML template (showContent.html) that generates all pages, but I only want to show certain content on the URL http://localhost/ ...

javascriptjquerywordpressangularjs

Showcasing extensive text in a Bootstrap pop-up message

I'm having some trouble showing a lengthy text in a twitter bootstrap tooltip. As you can observe from the image below, it's not working perfectly. Is there an easy solution to handle text that is too long for the bootstrap tooltip? EDIT (includ ...

jquerycsstwitter-bootstraptwitter-bootstrap-tooltip

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

Jquery experiencing compatibility issues with Internet Explorer

I created this jQuery function to check a PHP page and display the result. It works perfectly in other browsers, but unfortunately I am experiencing issues with Internet Explorer (IE). This is concerning because most users use IE as their browser. $(docum ...

jqueryinternet-explorer

Incorporating fresh visuals into the Fotorama presentation

Currently in search of a reliable jQuery image slider with thumbnail previews for a web application I am developing. Initially interested in Fotorama.js as it meets most of my criteria, but unsure if it supports adding additional images via AJAX after in ...

jqueryajaxjquery-pluginssliderfotorama

Use jQuery to Toggle Between Excerpt and Full Content

I stumbled upon this link: Toggle Posts in wordpress using jquery, but unfortunately, it doesn't quite meet my needs. I have a custom post type and what I'm trying to achieve is having an excerpt with a "Read More" link that toggles or slideToggl ...

jquerywordpresstoggle

Tips on retrieving a value nested within 3 layers in Angular

In my Angular application, I have three components - A, B, and C. Component A serves as the main component, Component B is a smaller section nested inside A, and Component C represents a modal dialog. The template code for Component A looks something like ...

javascriptangularangular-material

What is the best way to adjust the Directions route Polyline to the edge of the map canvas?

I am currently working on a project that involves direction mapping, and I need the directions to be displayed on the right side of the panel when rendered. Here is what I am currently getting: However, I do not want the directions to appear behind the pa ...

javascriptangulargoogle-mapsgoogle-maps-api-3

Troubleshooting: Jquery ajax request not functioning on Android emulator

Attempting to call a webservice using jQuery ajax. Utilizing jsonp as a datatype to address cross domain issues. All browsers are functioning properly. Tested on different domains and receiving valid responses. However, encountering failures when trying t ...

androidjqueryajax

Unraveling the mysteries of an undefined entity

When the variable response is undefined, attempting to retrieve its property status will result in an error: Error: Unable to access property 'status' of undefined const { response, response: { status }, request, config, } = error as A ...

javascripttypescriptecmascript-6

Incorporate a hanging indent within the text enclosed by the <li> element

(revised multiple times to enhance clarity) Disclaimer: I did not create the HTML code. Below is the structure of the HTML (please note that the links and text following them are on the same line): <li> <strong>Heading of section</str ...

javascriptjqueryhtmlcsstext-indent

The stick division shows some bouncy behavior when seen on a mobile device

When viewing on mobile, the #main-categories div seems to be jumping instead of smoothly sticking to the top. What could be causing this behavior? Here is the code snippet I have: var s = $("#main-categories"); var pos = s.position(); $(window).scroll(f ...

jqueryhtmlcsssticky

Managing Ajax error messages

$.getJSON("data.php", function(data) { ... this callback is for handling successful retrieval of data }); What is the best way to manage errors in relation to the ongoing $.getJSON request? ...

javascriptjqueryajaxjson

Tips for including the % symbol in the Y-axis labels on a HighChart graph

I am attempting to incorporate the % symbol after the value of 100 or -100 on the yAxis in the chart shown above. I made an attempt to add the % symbols as follows: quotes.data.frequency_counts[i].negative = Math.round(negative * -1)+'%'; quote ...

javascriptangularjshighcharts

What is the best way to achieve a full width table in an HTML format on a smartphone browser?

Apologies for my limited English proficiency. I am currently working on creating a horizontal scrollable table in HTML. My goal is to make the width of the table span beyond the browser's viewing area, so that sticky cell functionality can be implem ...

javascriptjqueryhtmlcss

Problem with Gulp-Watch Functionality on Windows 7 - Node.js, NPM, and Gulp All Up and Running Fine

As someone who is new to the world of Node.js, NPM, and other modern tools designed to improve productivity and workflow, I find myself faced with some challenges. Below are the specifications: Node version - v8.10.0 Gulp CLI version - 2.0.1 Gulp Loca ...

javascriptnode.jsnpmgulpgulp-watch

Issue with mouse hover not triggering overlay effect between two div elements

I am trying to display articles in a 2x3 matrix with article details like image, title, author, and description wrapped inside a div. I want this entire div to be overlapped by another div of the same dimensions containing a single image. Below is a snipp ...

jqueryhtmlcss

Creating a custom button in PHP

Currently, I am in the process of developing a shopping cart feature. One key requirement is to send both the product ID and the desired quantity chosen by the user to another file named cart.php. Below is an excerpt from my code snippet: for($i=0;$i< ...

phphtmlmysqlformsform-submit