Is there a way to only load embedded Spotify Iframes when hovering?
I have this Backbone App where I have bunch of playlists embedded inside an iframe, but the page is pretty slow and heavy because it loads all playlists at once.
I tried to add the lazysizes-plugin, but it doesnt seem to work/help (speed remains the same)
So, my HTML looks pretty simple:
<iframe class="lazyload playList" data-src="" width="300" height="80" frameborder="0" allowtransparency="true"></iframe>
EDIT
Here is my script
this.collection.each(function(spotify, index) {
var service = spotify.get('services').spotify,
s=service.match(/[^\/:]*$/);
$('iframe.playList').eq(index+3).attr('data-src', 'https://embed.spotify.com/?uri=spotify:user:digster.dk:playlist:'+s);
});
I have up to 16 playlists at once on a page, so the data-src is different for each iframe of course
Anyone have an idea or suggestion?
This is what i would do:
http://jsfiddle.net/vjw7o9ha/
Basically, you create all the iframes without the src, and on hover, you use jquery to set the source.
This is just an example, you can create a much better code starting from this.
Using mouseover directly on an iframe might be problematic, because an iframe is a different document.
In case you have used lazySizes (I hope you not hsut added the class, but also changend src to data-src) you can try to so something like this:
Add iframe with data-src, but without class="lazyload"
On domready or later on window.onload add the class lazyload
<iframe data-src="spotify.html">/iframe>
$(window).on('load', function(){
$('iframe[data-src]').addClass('lazyload');
});
Related
So there is a h2 that contains the following class entry-contentH2 and I'm simply trying to include the following divs before that h2 but it's not even showing anything. I can't seem to figure out why it isn't adding it, because when I try it without any divs and I test with just text it works.
jQuery(function($) {
$(".entry-contentH2").before("<div class="video_player"><iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube.com/embed/'.$recipe->recipe_video.'?fs=1" frameborder="0"></iframe></div>");
});
What is the reason as to why .before doesn't work in this case?
Here is the code: https://jsfiddle.net/or9Lbbq0/2/
Your iframe is most likely being blocked by youtube. External websites such as:
youtube.com
google.com
stackoverflow.com
etc.
are not loading in your frame, is because they are intentionally leveraging some sort of Frame Killer.
Suggested reading:
Framekiller (Wikipedia)
Busting a tough FRAME killer
see simular problem here
you need to change the inner or outer " to '
like so
jQuery(function($) { //V here V
$(".entry-contentH2").before("<div class='video_player'>hi</div>");
});
or so
jQuery(function($) { //V here and here V
$(".entry-contentH2").before('<div class="video_player">hi</div>');
})
jsfiddle
In order to prevent an iframe from flashing, I'm setting its visibility inside a setTimeout (the CSS is set to visibility:hidden)
setTimeout(function(){
$n('#myFrame').css('visibility','visible');}, 750);
Works great, although when I load subsequent locations inside the frame, the flashing behavior returns since the visibility is already set.
What I'd like to do is create a function that targets the iframe BEFORE the DOM/page has loaded to set the visibility to hidden again and then setTimeout.
Keep in mind that this script will run on the ServiceNow platform, meaning some options are limited (can't load in document head, etc.)
It's sort of like a reverse document.ready(). Is this even possible?
Thanks for any leads,
Paco
Just set it in your source:
<iframe style="display: none;"></iframe>
Then un-hide it when you want to.
$('buttonToChangeTheIframePage').click(function(e){
e.preventDefault();
$('#myFrame').css('visibility','hidden');
$('#myFrame').delay(1000).css('visibility','visible');
});
This assumes you are loading locations from OUTSIDE the iframe - anything within the iframe (like a link) will still trigger this behaviour.
EDIT
This is actually better and will work for all circumstances (I think - just check no silly errors as not tested)
<iframe id="myFrame" src="http://www.google.com/" onLoad="hideUnhide();"></iframe>
function hideUnhide(){
$('#myFrame').css('visibility','hidden').delay(1000).css('visibility','visible');
}
Use addAfterPageLoadedEvent(func) in js_include_doc_type.js
<iframe id="gsft_main" style="visibility: hidden;">
anything ....
<script>
addAfterPageLoadedEvent(function() {
$j('#gsft_main').css('visibility','visible');
});
</script>
</iframe>
i'm working on adding a video to the home page of a site i'm working on. ideally, i'd like to show the youtube version by default, and add a button underneath that says something like "don't have access to youtube? click here to watch an alternate version".
once clicked, a different player will load into the same video div and replace the youtube version.
we have the video uploaded to youtube, and also have an html5 version on the site that is played via the video.js plugin for wordpress.
how can i load the alternate html5 video player into the div via a button click (without refreshing the page if possible)? i'm assuming this can be done via javascript / jquery / ajax somehow, but I'm not sure how to do this (my js level is novice).
thanks!!
You can clear the div out with:
$("#yourDivID").empty()
Then populate the div with new content
var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);
Or
$("#yourDivID").html(newHtml);
Here's a very primitive example of replacing content in a Div: http://jsfiddle.net/FJuwd/
Html
<div id="myvideodiv"> </div>
In script
mybutton.click(function(){
playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
file: "/uploads/example.mp4",
height: 360,
image: "/uploads/example.jpg",
width: 640
});
})
see example here.
jQuery solution: Just create div and populate with video on button click. Many ways to do this. The check for length is only there to eliminate putting another video up.
<div id="player"><div>
<button id="clickme">Click to play video</button>
$("#clickme").on("click", function(e) {
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
mydiv.append(myvideo);
}
});
See example
thanks so much everyone for all of the help. love this place.
i was actually able to work this out more easily by just toggling divs that contain the two different videos. not sure why i didn't think of this initially. doesn't actually remove the content, just hides it, but i think it will work for me.
html
<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>
<input type="button" value="switch video" id="click"/>
jquery
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
});
});
i also tried this with the js, so the youtube video would be removed & stop playing when the divs are toggled
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
$('#youtube').empty();
});
});
this works, but i wasn't sure how to add the youtube video back when toggling back. not really a big deal - just something i was curious about. i'm assuming it can be done with .append.
problem with this is that both of the vids exist in the wordpress page as shortcodes, so it complicates things a bit. i just wrapped the shortdoces in divs with these ids in the wordpress page to get the toggle working, and added the js to my page template. thx again!
I am creating an iframe using jQuery to a "cross-site" URL. This works properly in Firefox but IE is prepending the parent pages domain to the iframes src URL.
An example would be if I am creating the iframe (with jQuery):
<iframe src="http://www.google.com"></iframe>
The page that IE would try to load is:
http://www._mysite_.com/http://www.google.com
If I statically in the HTML create the iframe everything works fine. It is only when I make it using JS that it loads the wrong page.
I suppose I would understand if this was intentional cross-site protection that IE has built in, but I am wondering if that is the case, or if I am missing something.
Is this default behavior for IE? If anyone has a workaround it would be greatly appreciated.
EDIT:
Generated code is:
<iframe id="myIframe" width="500" height="400" frameborder="0" src="http://www._website_.com/aaa/bbb/ccc">
I tested the generated code at static HTML and it did work properly in IE.
EDIT 2:
This is how I am creating the iframe:
jQuery('.signUp').live('click', function() {
var url = 'http://www._website_.com'+$(this).attr('href');
var thisModal='<div id="dialogRes" class="windowG"><iframe id="iframeG" frameborder="0" width="500" height="400" src="#"></iframe></div>';
jQuery('body').append(thisModal);
jQuery('#iframeG').prop('src', url);
return false;
});
On this line:
jQuery('#iframeG').prop('src', url);
I have tried attr() as well as removing it all together and just putting the url in the src tag of the iframe. Nothing seemed to work.
The problem is that in IE, the href attribute is always returned as an absolute URL. So if you had
<a id="demo" href="bar/baz">...</a>
Then your on your website http://mydomain.com/foo:
jQuery('#demo').attr('href') == 'http://mydomain.com/foo/bar/baz';
Two options to work around this are to either parse out the (possible) full domain from the href attribute, or to use a different custom attribute just to hold the target address/path (eg data-href).
i have an iframe:
<iframe name="printarea" id="printarea" src="print.php" style="display: none;"></iframe>
i need this iframe to have the style "display: none;" so it is invisible
now when someone clicks a link generated via php:
echo '<img src="images/icon-print.png" alt="" />';
i want it to simply change the iframe SRC and print what is in the iframe, however my code is not working at all:
function print_receipt (id)
{
$('#printarea').attr('src', 'print.php?id='+id);
$('#printarea').focus();
$('#printarea').print();
}
so this is what i want:
- user clicks on link
- iframe content changes based on the link he clicks
- iframe content prints
2 issues:
you'll maybe need to wait until the page is loaded
print() is a method of window-objects
$('#printarea')
.load(function(){this.contentWindow.print();$(this).unbind('load');})
.attr('src', 'print.php?id='+id);
What is $('#printarea').focus(); supposed to achieve? As far as I know .focus() works with form elements and links...
What is $('#printarea').print();? Haven't come across that function in jQuery. If you're using a plugin it would help to mention which one.
So perhaps you'll have more luck with:
function print_receipt (id)
{
$('#printarea')
.attr('src', 'print.php?id='+id)
.css("display","block");
}