Giter VIP home page Giter VIP logo

Comments (4)

kubik101 avatar 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 avatar vodkabears commented on July 25, 2024

@amilanesa https://github.com/VodkaBears/Remodal#events

from remodal.

chrisames avatar 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 avatar 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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.