I am creating a site which contains multiple YouTube iframes that appear within Zurb Foundations reveal modals. The finished version of the site will have around 30 videos which will create a heavy load and will deteriorate the page speed. To counter this I was planning to use lazyYT.js to lazy load the videos It all works great on the first load, however after opening a modal and finishing playing then closing the modal the video will restart and play in the background.
I have tried multiple variations in lazy loading with no success. I assume the problem is with reveal not terminating the iframe correctly or that the lazy load gets triggered incorrectly.
Fiddle
http://jsfiddle.net/j43aepqh/6/
HTML:
<!-- Triggers the modals -->
Example Modal w/Video…
<div id="videoModal" class="reveal-modal large" data-reveal="">
<h2>This modal has video</h2>
<div class="flex-video widescreen vimeo" style="display: block;">
<div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
</div>
<a class="close-reveal-modal">×</a>
</div>
<!-- Reveal Modals end -->
<script>$(document).foundation();</script>
<script>$('.js-lazyYT').lazyYT();</script>
This is driving me mad as I can't get my head around what is happening and how to resolve the issue.
Is this the correct valid way of posting videos on a site? I am open to any other methods of posting multiple videos on a single page using a modal and YouTubes iframe embed without causing serious page speed problems.
Are there any good scripts for deferring the load of iframes or a way to load them one by one?
Any help or suggestions would be appreciated.
p.s first time using stackoverflow, hope I'm doing it right
I experienced the same problem. I was able to get lazy loading to work using a different script, found here: http://www.labnol.org/internet/light-youtube-embeds/27941/
Let me know if it works for you!
Brent
I have just been dealing with a situation that may be similar. I have thumbnails of 30 or so videos on my homepage and when one is clicked on, a modal window is opened with the iframe video inside.
Previously, I was having large page load times as all the modal windows were being loaded with iframes inside on page load. I also tried js-lazyYT but ran into issues with videos playing after modal closure. I dealt with this in the following way:
HTML
<!-- Image link to modal -->
<div class="small-12 medium-4 medium-pull-8 columns">
<a class="youtube-modal-reveal" data-reveal-id="{{ videoWorkshop.vID }}">
<img src="http://img.youtube.com/vi/{{ videoWorkshop.vID }}/sddefault.jpg">
</a>
</div>
<!-- Modal -->
<div id="{{ videoWorkshop.vID }}" class="reveal-modal large" data-reveal="">
<div class="flex-video">
</div>
<a class="close-reveal-modal">×</a>
</div>
JS
(function() {
$(".youtube-modal-reveal").each(function( index, element ) {
// Use the one function as we only need to load the video once, even if they visit the modal multiple times
$(element).one( "click", function() {
var id = $(this).attr("data-reveal-id");
var flexVideoContainer = $("#"+id).children(".flex-video");
$(flexVideoContainer).html("<iframe src='//www.youtube.com/embed/" + id + "?rel=0' frameborder='0' allowfullscreen></iframe>");
});
});
})();
I would assume you're wanting to do the lazy loading on modal open. Try the following (inside a $(document).ready(...) block):
$(".reveal-modal").on("opened", function () {
$(this).find(".js-lazyYT").lazyYT();
});
You might also want to destroy the loaded object on close, too.
$(".reveal-modal").on("closed", function () {
// Implementation left to reader
});
Related
On my webpage, I've got several tabs and, in one of them, I want to display an iframe containing a Google Doc.
When the iframe is displayed, the google doc is loaded and there is no problem.
But by default, this tab is hidden (so, the iframe inside too)
Something like
<div id="tab-1">...</div>
<div id="tab-2" hidden>...</div>
<div id="tab-3" hidden><iframe src="https://docs.google.com/document/d/......../edit?usp=sharing&embed=true"></iframe></div>
with jquery to handle actions
And, when the iframe is hidden, it seems like it can't load until it's not hidden anymore. The problem is I endlessly get popup saying
This error has been reported to Google and will be examined as soon as possible. To continue, please refresh the page.
In a page without tab, if the iframe has the "hidden" attribute, the bug occurs too
I could get around the problem by "hiding" the iframe with a "heigth=0" but when it's hidden in a tab, the problem comes back
Have you ever met this problem and find a way to solve it ? Do I have to "dynamically load" the google doc iframe when it becomes visible ? (And then, how to ?)
Thanks
I don't mind if the iframe is loaded later so I decided to load the <iframe> with jquery, when the tab is opened, by storing the src into the attributes.
There could be problems though, if the tab is closed while the iframe is not fully loaded.
That's why I prevent this by stop loading if the tab is changed, (and don't if it's already fully loaded.)
html
<iframe data-src="https://docs.google.com/document/d/......"
class="google-doc"></iframe>
jquery
//Stops iframe loading
$(".tab-to-close iframe.google-doc").not('.isloaded').prop('src','')
//Change the tabs
$(".tab-to-close").hide();
$(".tab-to-open").show();
var iframetoload = $(".tab-to-open iframe.google-doc");
//Load iframes on the new tab
iframetoload.prop('src',iframetoload.data('src'))
//If it's loaded in time, save it so it's not destroyed on tab changing
iframtetoload.on('load', function(){
$(this).addClass('isloaded');
});
I am struggling to load Google maps on anything other than the first page.
In the example I have Google maps on page two; but when I move the code to page one, it is working.
Why is this not loading correctly on page two?
code which i move:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>
http://jsfiddle.net/Spytter/4mtyu/1202/
i have created a new fiddle to show the page not loading, then when button clicked re-size the map.
enter code herehttp://jsfiddle.net/Spytter/4mtyu/1302/
I would like to make a user interface inside a leaflet popup (large amont of datas from mysql, buttons, little tchat system.etc..)
Should I bind all this html code + datas with the leaflet "bindpopup" function or should I better include another webpage into the popup with iframe ? or other idea ?
How does leaflet will display a very large popup on a mobile device?
If this is what you really want to do, you'd better bind all the content to a pop-up.
Why? Because using an iframe implies restrictions if the frame is loaded from cross-domain. Also, iframe and main page do not share any CSS styles or even JavaScript objects, they both have their own "scopes" of execution.
So you'll have to "double" load css/js files for examples (even if browsers are smart, I mean you'll have to handle two or more html files), and perhaps you codes like var L = window.top.L from your iframe.
If you have a really nasty DOM as pop-up content, what you could do it to create a template in an .html file, then load it through ajax and append it to your pop-up content. For example :
<div class="popup-container">
<div class="inner">
<input type="text">
...
</div>
</div>
Like this, this will create a logic separation between your map, and the content of your pop-up.
Any browser. All other functions operate as normal. I can traverse routes, open modals, dropdowns, manipulate collections... everything works.
But at some point, the browser will no longer scroll. In any view. Unless I refresh the browser window. Then scrolling goes back to normal.
What might cause this? Why does refreshing the page fix the issue? Is there a method to smack reactivity upside the head?
This is likely due to navigating away from a (Bootstrap ?) modal without properly closing it.
When you show up a modal in HTML5 frameworks, they usualy display a backdrop (some kind of fullscreen grayed out component) and disable scrolling to simulate desktop experience.
You can solve this problem using a simple iron:router pattern, if you're not using this package, be sure to execute the corresponding code whenever you navigate away from a page where a modal might get shown.
client/views/modal/modal.html
<template name="modal">
<div id="modal" class="modal fade">
...
</div>
</template>
<template name="main">
{{> modal}}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
Show Modal
</button>
</template>
client/config/router.js :
// define the plugin
Iron.Router.plugins.hideBootstrapModalOnStop=function(router,options){
router.onStop(function(){
// hide modal backdrop on route change
$(".modal-backdrop").remove();
// remove modal-open state on body
$("body").removeClass("modal-open");
});
};
// activate the plugin
Router.plugin("hideBootstrapModalOnStop");
The .modal-open class set on the HTML body tag is the one disabling scrolling when it is set, so by making sure that we remove that class whenever we navigate away from a page when a modal is possibly shown, we prevent this weird unexpected behavior to happen.
I want to display a loading animation while my page is loading, and when loading is complete then obviously hide it.
I am working in ASP.NET using Masterpages, just wondering there is a a simple way of doing this using JQuery?
Any pointers would be appreciated.
Thanks
Just place an image with the animated gif on the page. Give it an id of loadingImage and add the following script:
$(document).ready(function(){
$('#loadingImage').hide();
});
Incidentally, how long is your page taking to load? Is it using AJAX calls to load data? Maybe you should look into this and in the callback handler, call the hide() function on your image.
Consider using UpdateProgress control
When both answers above were along the right lines, I could get either do exactly what I needed in my scenario.
However I found the following post that on SO that has provided me the solution I was after.
Colorbox: Show/simulate 'loading' animation for iframe content?
Thanks all for your input.
I made an animation in this way on my master page:
<div id="loading" style="text-align: center" hidden><asp:Image ID="loadingImage" runat="server" ImageUrl="~/Images/loading.gif" /></div>
and then I used jQuery in this way
<script>
function showLoading() {
$("#loading").show();
}
var loadingTimeout = setTimeout(showLoading, 3000);
$(document).ready(function() {
clearTimeout(loadingTimeout); //make sure loader doesn't appear if page loads in less than 3 seconds
$("#loading").hide();
});
</script>
I hope this will help.