Having worked with a few CMS’ I have now settled on 2 that I love working with.. Symphony CMS and yes I know(WordPress) :).
Both are great and both serve a purpose when it comes to web apps and sites we build.
Having played with the Anything Slider from CSSTricks – Chris Coyer, I wanted to incorporate this into a slider on my latest Symphony project. All was going well until I encountered the old Oembed differences that youtube and vimeo throw out and the lack of provision for us designers to style html elements on top of these iframe embedded markup that the youtube and vimeo oembed services provide… neither of them allow you to request a video into your JSON or XML with the wmode=transparent param.
This means that I can’t place buttons over the top of my videos such as slider back and slider forward buttons. Enter JQuery.. the god of JS for me right now!
This snippet in my inline JS, allowed me to append the wmode=transparent param to the url string after it has been loaded on the page and hence allowing me to continue the designing bit of the site I’m building:
$(document).ready(function() {
$("iframe").each(function(){
var ifr_source = $(this).attr('src');
var wmode = "wmode=transparent";
if(ifr_source.indexOf('?') != -1) {
var getQString = ifr_source.split('?');
var oldString = getQString[1];
var newString = getQString[0];
$(this).attr('src',newString+'?'+wmode+'&'+oldString);
}
else $(this).attr('src',ifr_source+'?'+wmode);
});
});
I found the code on this site and am linking to the thread to show how progress weas made to refine the code so as to cater for the eventuality that some users may already have url params in the returned src.
http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/
So thanks for the tip and thanks for the love!