1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

my youtube data api problem

Discussion in 'jQuery' started by erkin0007, Sep 6, 2013.

  1. #1
    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
     
    Solved! View solution.
    erkin0007, Sep 6, 2013 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    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.
     
    HuggyStudios, Sep 6, 2013 IP
  3. erkin0007

    erkin0007 Member

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    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"
     
    erkin0007, Sep 7, 2013 IP
  4. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #4
    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.
     
    HuggyStudios, Sep 7, 2013 IP
  5. erkin0007

    erkin0007 Member

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #5
    this is not working but thank you so much
     
    erkin0007, Sep 7, 2013 IP
  6. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #6
    Can you post all of your code? I don't like working in the fiddle site.
     
    HuggyStudios, Sep 8, 2013 IP
  7. #7
    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):
     
    HuggyStudios, Sep 8, 2013 IP