Develop Reference

Pause Local Video On Modal Close

I have seen a few solutions to a similar issue here on SO but none do what I need. I have a web page that will be displayed on a kiosk that will not have internet connection so everything is local. All of my videos are in bootstrap modals and they continue to play on modal close.
One solution removes the link entirely and so the video can't be replayed if clicked again. The other solutions in their various forms stop the video for 1/2 a second then the video continues.
Video Modal
<!-- Modal Overview -->
<div class="portfolio-modal modal fade" id="gal_overview" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2 class="text-uppercase">Overview</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="video/overview.mp4" allowfullscreen></iframe></div>
<button class="btn btn-primary" data-dismiss="modal" type="button">
<i class="fas fa-times"></i>
Close Video</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Last Script Tried
<script>
$('.portfolio-modal').on('hide.bs.modal', function(e) {
var $if = $(e.delegateTarget).find('iframe');
var src = $if.attr("src");
$if.attr("src", '/empty.html');
$if.attr("src", src);
});
</script>
This current code will start playing all videos in the background on page load. I'm sure I'm missing something super simple here.

Working answer:
Since the iframe just points to a video file, you can change the iframe to a <video> and control the video much more easily.
<video src="video/overview.mp4"></video>
The .pause() method on the video element can then be used to actually pause the video.
<script>
$('.portfolio-modal').on('hide.bs.modal', function(e) {
var $v = $(e.delegateTarget).find('video');
$v[0].pause(); // use [0] because jQuery returns a list
});
</script>
Initial answer:
It sounds like you should lazily-apply the iframe's src attribute. So when the page loads, the iframes' src attributes should be data-src. That way no video is playing.
Then on $('.portfolio-modal').on('show.bs.modal'), set the src attribute with the contents of data-src. The video will play.
Then when the modal is hidden, replace src with /empty.html again.
Next time the modal is launched, the src will be set again, and the cycle repeats.
If you truly want to pause the video rather than reset the iframe, then this answer should be helpful.

jQuery append html loading randomly on page reresh

I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)

Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});

Using bootstrap modal to play local mp4 video on IE11 while it always notify "Do you want to open or save xxx"

I am trying to use modal to popup and play a local mp4 video.
It works on Chrome, Firefox, IE Edge except the IE11 or older version. It always popup a warning on the bottom "Do you want to open or save xxxx from xxxxx". If I click open, it will open the Films & TV to play the video.
Is there anything I missed from using the bootstrap modal? Or it just what IE works like?
Here is my modal:
<div class="productVideo">
<a href="#videoModal" data-toggle="modal">
<img src="../assets/img/product/icon/play-button.png">
</a>
<!-- Modal HTML -->
<div id="videoModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" id="video" src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
Besides, I found the mp3/mp4 from the MDN could not be played normally in IE, it will warn "Do you want to open or save xxxx from xxxxx", but Chrome could play it normally.
Update
use 'video' tag instead of 'iframe' works for IE11 now.

Getting error while opening web site in iframes using html

I am having hard time to make my Iframe display my html string which happens to be
<div class="center wow fadeInDown">
<iframe src="http://www.asana.com" style="width: 90%; height: 600px;"
name="internal"></iframe>
</div>

Jquery Mobile, not working dialog

I can not see why it is not working this dialog. I am using jqm 1.3
Open dialog
<div id="foo" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
I have added on the "head"
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js>
and others jqm events are working.

You need to wrap your anchor tag which invokes the dialog inside a page div as given below.
<div data-role="page">
<div data-role="content">
Open dialog
</div>
</div>
<div id="foo" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
You can check out an example at Live fiddle