Comments (4)
kubik101
commented on July 25, 2024
1
@vodkabears Are you able to post a full example? A lot of people struggle with this, and it's a great modal, would love to be able to do it like a pro..!
It took me ages to find a solution to this online.
This one isn't ideal but it works for those who don't know JS very well (like me).
Solution came from this thread: #197
I would love to know if there is a way to do this using the events in remodal: https://github.com/VodkaBears/Remodal#events
=)
<div class="remodal" data-remodal-id="video-testimonial-01" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<div class="remodal_content">
<!-- start // -->
<div class="embed_media" id="video01"><iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/QvW61K2s0tA" frameborder="0" allowfullscreen></iframe></div>
<!-- end // -->
</div>
</div>
<div class="remodal" data-remodal-id="video-testimonial-02" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<div class="remodal_content">
<!-- start // -->
<div class="embed_media" id="video02"><iframe width="560" height="315" src="https://www.youtube.com/embed/LWGJA9i18Co" frameborder="0" allowfullscreen></iframe></div>
<!-- end // -->
</div>
</div>
<div class="remodal" data-remodal-id="video-testimonial-03" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
<button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
<div class="remodal_content">
<!-- start // -->
<div class="embed_media" id="video03"><iframe width="560" height="315" src="https://www.youtube.com/embed/m86ae_e_ptU" frameborder="0" allowfullscreen></iframe></div>
<!-- end // -->
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$('.remodal-close').click(function() {
var video01 = $("#video01 iframe").attr("src");
$("#video01 iframe").attr("src","");
$("#video01 iframe").attr("src",video01);
var video02 = $("#video02 iframe").attr("src");
$("#video02 iframe").attr("src","");
$("#video02 iframe").attr("src", video02);
var video03 = $("#video03 iframe").attr("src");
$("#video03 iframe").attr("src","");
$("#video03 iframe").attr("src", video03);
});
$('.remodal-wrapper').click(function() {
var video01 = $("#video01 iframe").attr("src");
$("#video01 iframe").attr("src","");
$("#video01 iframe").attr("src",video01);
var video02 = $("#video02 iframe").attr("src");
$("#video02 iframe").attr("src","");
$("#video02 iframe").attr("src", video02);
var video03 = $("#video03 iframe").attr("src");
$("#video03 iframe").attr("src","");
$("#video03 iframe").attr("src", video03);
});
});
</script>from remodal.
vodkabears
commented on July 25, 2024
@amilanesa https://github.com/VodkaBears/Remodal#events
from remodal.
chrisames
commented on July 25, 2024
Same here, I checked out the link above but can't see where I pause or stop the video when modal is closed. How does a novice go about getting this fixed? :)
from remodal.
rubelmiah
commented on July 25, 2024
Best solution.
Try this code:
$(document).on('closed', '.remodal', function (e) {
var src = $(this).find('iframe').attr('src');
$(this).find('iframe').attr('src', '');
$(this).find('iframe').attr('src', src);
});
from remodal.
Related Issues (20)
- Remodal inside Facebook iframe
- Remodal onload
- No longer actively maintained HOT 10
- Change responsibility web or mobile
- ***wrong post*** HOT 1
- blurry text when opening modal window HOT 2
- form label no checked
- you can use select2 in modal? HOT 3
- Check if modal has been closed once or destroyed HOT 2
- Multiple modal. HOT 1
- Won't trigger on SVG shapes in iOS (solution provided)
- Add no longer actively maintained message on plugin site HOT 1
- modal can't open again when modal closed twice HOT 2
- In IE11, remodal_obj.open() doesn't work properly
- Is there an React version of Remodal?
- New Functionality: send data to remodal from
- appendTo
- It's not working properly on Firefox for Mac HOT 2
- Chrome 80 HOT 1
- not working for netifly
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remodal.