http://jsfiddle.net/CastH/ hi i make youtube data api search program program is searching to video on youtube .but not playing if without " $(".tikla").click(function(video_id) { $("# oynat").fadeIn().find("span").html('<iframe width="560" height="315" src="//www.youtube.com/embed/'+video_id+'" frameborder="0"></iframe>') )};" it is run else it isn't run my engilish is bad . i am sorry
Hey, I'm not really sure what you are asking for. I can see something that might be breaking your code, you have a space before # oynat, you should take that out.
thank you digital point link suppose "#oynat".so i make # oynat. i am creating music script.searching youtube and,if you click video.it should play the this video. this script search the youtube in this way,but it is not play the videos http://jsfiddle.net/CastH/1/ edit :search the "avril lavinge"
It's because you are dynamically inserting content and that didn't exists in the DOM after the original page load. I couldn't see how you passing the video_id as a value. Try this code out. Search (replace final var with this var final="<li><a href='#' class='tikla' title='"+video_izlenme+" izlenme' id='muzik"+video_id+"' data-videoid='"+video_id+"'><img src='"+video_resim+"' />"+video_baslik+"</a></li>"; Code (markup): Click function for video showing $(document).on('click', '.tikla', function() { var video_id = $(this).data('videoid'); $("#oynat").fadeIn().html('<iframe width="560" height="315" src="//www.youtube.com/embed/'+video_id+'" frameborder="0"></iframe>'); )}; Code (markup): Something like that should work. Let me know, this isn't tested thou.
I've got it all working for you. What you was trying to accomplish was not even close in the code. This could do with a tidy up and try not to have inline JS or CSS as it slows down the performance of the page (Check google Audits for help). Working link: http://garterstockings.net/youtube/# Working code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style> body {background:#86C9EF;font-size:13px;color:#fff;font-family:verdana;} ul,li {list-style:none;margin:0;padding:0;} li {float:left;width:120px;padding:5px;background:#fff;height:150px;margin-right:20px;margin-bottom:20px;} li a{color:#333;font-weight:bold;text-decoration:none;position:relative;} li a:hover:after{position:absolute;content:attr(title);font-size:10px;left:110px;top:-40px;background:#333;color:#fff;z-index:9999;padding:2px;line-height:18px;width:120px;} #musicsearch,#video {margin-top:20px;margin-left:20px;width:700px;} input[type=text] {padding:5px;border:2px solid #222;background:#fff;font-size:18px;font-weight:bold;width:300px;} input[type=submit] {padding:5px;background:#333;cursor:pointer;color:#fff;border:0;font-size:18px;font-weight:bold;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // add click function $(document).on('click', '.tikla', function() { var video_id = $(this).data('videoid'); // remove spaces video_id = video_id.replace('%20', '').replace(' ', ''); // add the iframe to #play span $("#play").fadeIn().html('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ video_id + '" frameborder="0"></iframe>'); }); $("#musicsearch").keyup(function() { $("#video").html(''); var k = $("#word").val(); var a = encodeURIComponent(k); var address = 'http://gdata.youtube.com/feeds/api/videos?q='+a+'&max-results=24&v=2&alt=jsonc&category=Music'; $.ajax({ type: "GET", url: address, dataType:"jsonp", success: function(result) { if(result.data.items) { $.each(result.data.items, function(i,data) { var video_id = data.id; var video_title = data.title; var video_image = data.thumbnail.sqDefault; var video_rating = data.viewCount; var final = '<li><a href="#"" class="click tikla" title="' + video_rating + ' izlenme" data-videoid=" ' + video_id + '" id="muzik"' + video_id + '""><img src="' + video_image + '" />' + video_title + '</a></li>'; $("#video").append(final); }); } else { $("#video").html("<div id='no_video'>video isn't</div>"); } } }); }); }); </script> </head> <body> <form id="musicsearch" onsubmit="return false"> <input type="text" id="word" /> <input type="submit" id="search" value="search"/> </form> <div id="alan"> <ul id="video"> </ul> </div> <div id="clear:both"> </div> <span id="play"></span> </body> </html> Code (markup):