jQuery a href and button
<p>It's easy to say that <code>&lt;a href&gt;</code> and a button can have the same functions, but it's not working.</p>

<p>This is the sample link of my website: <a href="http://cocopop12.site11.com/search/" rel="nofollow">http://cocopop12.site11.com/search/</a>.
It's a YouTube plugin that has 2 buttons on the right side, Preview and Select.</p>

<p>The problem is that if you click preview it should play the YouTube video. But it's not working. The code is below.</p>

<p>This is the link (the link is working, I just copy this on the thumbnails):</p>

<pre><code>&lt;a class="videoThumb4" href="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '"&gt;
' . $yValue['description'] . '
&lt;/a&gt;
</code></pre>

<p>This is the button which I want to replace on hover.</p>

<pre><code>&lt;input class="videoThumb4" onClick="location.href=\'http://www.youtube.com/watch?v=' . $yValue['videoid'] . '\'" type="button" name="previewSel" value="Preview" id="previewbut"&gt;
</code></pre>

<p>The jQuery code:</p>

<pre><code>$(function() {
&lt;!-- videoThumb is a css class found in the foreach list class="videoThumb". ytvideo is the holder ID set as div ID--&gt;
$(".videoThumb4").ytplaylist({
    holderId: 'ytvideo4',
    html5: true,
    playerWidth: '520',
    autoPlay: false,
    sliding: false,
    listsliding: true,
    social: true,
    autoHide: false,
    playfirst: 0,
    playOnLoad: false,
    modestbranding: true,
    showInfo: false
});
});


// HOVER
$(document).ready(function(){
$("input[type=button]#previewbut, #selectbut").hide();
$("li#static").hover(
function() {
    $(this).find('#previewbut, #selectbut').fadeIn();
},
function() {
    $(this).find('#previewbut, #selectbut').fadeOut();
});
});
</code></pre>

<p>The full code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /&gt;
&lt;title&gt;Youtube Search&lt;/title&gt;
&lt;meta name="description" content="youtube keyword playlist jquery and php Gdata Api version2" /&gt;
&lt;meta name="copyright" content="www.cfconsultancy.nl" /&gt;
&lt;meta name="web_author" content="Ceasar Feijen" /&gt;
&lt;link rel="stylesheet" type="text/css" href="./css/index.css" /&gt;
&lt;!-- Remove all above if you are including this file --&gt;

&lt;!-- Needed for the youtube player --&gt;
&lt;link rel="stylesheet" type="text/css" href="./css/youtubeplaylist.css" /&gt;

&lt;!-- Example css playlist to the right. See example 3 --&gt;
&lt;link rel="stylesheet" type="text/css" href="./css/youtubeplaylist-right-with-thumbs.css" /&gt;

&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="./js/jquery.youtubeplaylist-min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;     
        $(function() {
            &lt;!-- videoThumb is a css class found in the foreach list class="videoThumb". ytvideo is the holder ID set as div ID--&gt;
            $(".videoThumb4").ytplaylist({
                holderId: 'ytvideo4',
                html5: true,
                playerWidth: '520',
                autoPlay: false,
                sliding: false,
                listsliding: true,
                social: true,
                autoHide: false,
                playfirst: 0,
                playOnLoad: false,
                modestbranding: true,
                showInfo: false
            });
        });


        // HOVER
        $(document).ready(function(){
            $("input[type=button]#previewbut, #selectbut").hide();
            $("li#static").hover(
            function() {
                $(this).find('#previewbut, #selectbut').fadeIn();
            },
            function() {
                $(this).find('#previewbut, #selectbut').fadeOut();
            });
        });


&lt;/script&gt;

    &lt;!-- CSS --&gt;
    &lt;style&gt;
    /************** Code for Demo **************/

    /* Containing Element */
    /* Static Image Shown Before Hover */
    a#static{
      z-index:1;
        }
    input[type=button]#previewbut {
        background-color: #9B9B9B;
        color: #ffffff;
        text-decoration:none;
        border:0px;
        width:100px;

    }

    input[type=button]#previewbut {
        position: absolute;
        margin-top:-45px;
        margin-left:50px;

        cursor: pointer;
        font-size: 12px;
        line-height: 11px;
        padding: 10px 5px;
        text-decoration: none;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 1px 1px 2px #5C5C5C;
        -webkit-box-shadow: 1px 1px 2px #5C5C5C;
        box-shadow: 1px 1px 2px #5C5C5C;

    }
    input[type=button]#previewbut:hover {
        background-color: #007073;
        color: #ffffff;
        text-decoration:none;
    }
    input[type=button]#selectbut {
        background-color: #9B9B9B;
        color: #ffffff;
        text-decoration:none;
        border:0px;
    }

    input[type=button]#selectbut {
        position: absolute;
        margin-top:-45px;
        margin-left:170px;
        width:100px;

        cursor: pointer;
        font-size: 12px;
        line-height: 11px;
        padding: 10px 5px;
        text-decoration: none;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 1px 1px 2px #5C5C5C;
        -webkit-box-shadow: 1px 1px 2px #5C5C5C;
        box-shadow: 1px 1px 2px #5C5C5C;

    }
    input[type=button]#selectbut:hover {
        background-color: #007073;
        color: #ffffff;
        text-decoration:none;
    }

    &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;!-- Needed for the youtube player example 3 --&gt;
&lt;div class="youtubeplayer"&gt;
    &lt;?php
    //if ( !isset( $_POST['subKW'] ) ) {
    ?&gt;
    &lt;h2&gt;Search&lt;/h2&gt;
    &lt;form method="post" action="&lt;?php echo htmlentities( $_SERVER['PHP_SELF'] ); ?&gt;"&gt;
        Input keyword : &lt;input type="text" name="kw" value=""&gt; &lt;br /&gt;
        &lt;input type="submit" name="subKW" value="Search"&gt;
    &lt;/form&gt;
    &lt;?php
    //} else {
    ?&gt;
    &lt;h2&gt;YT Playlist  &lt;a href="index.php"&gt;Back&lt;/a&gt;&lt;/h2&gt;&lt;!-- END  --&gt;
    &lt;div class="yt_holder yt_holder_right"&gt;
        &lt;div id="ytvideo4"&gt;&lt;/div&gt;
            &lt;!--Up and Down arrow --&gt;
            &lt;div class="you_up"&gt;&lt;img src="css/up_arrow.png" alt="+ Slide" title="HIDE" /&gt;&lt;/div&gt;
            &lt;div class="you_down"&gt;&lt;img src="css/down_arrow.png" alt="- Slide" title="SHOW" /&gt;&lt;/div&gt;
            &lt;!-- END  --&gt;
            &lt;div class="youplayer ytplayerright"&gt;
            &lt;ul class="videoyou videoytright"&gt;
            &lt;?php
            //$kw = $_POST['kw'];
            //global $kw;
            // Use like this.
            include_once('class/class.youtubelist.php');
            //in this example a playlist
            //$video = new youtubelist('playlist');
            //Keywords
            $video = new youtubelist('keywords');
            $video-&gt;set_keywords( /*$kw*/ 'yoga' );         
            //This is the link to the playlist.
            //http://www.youtube.com/playlist?list=PLAEAD0FC99564BA7F
            //REMOVE the PL from the string if there is an PL after list=
            $video-&gt;set_playlist('AEAD0FC99564BA7F');
            $video-&gt;set_max(50);
            $video-&gt;set_order('none'); // to retrieve most actual video's
            $video-&gt;set_cachexml(false);
            $video-&gt;set_cachelife(86400);
            $video-&gt;set_xmlpath('./cache/');
            $video-&gt;set_start(1);
            // --Set text and description length
            $video-&gt;set_descriptionlength(85);
            $video-&gt;set_titlelength(25);

            if ( $video-&gt;get_videos() !=null ) {
                foreach ($video-&gt;get_videos() as $yKey =&gt; $yValue) {
                    echo '
                    &lt;li id="static"&gt;
                        &lt;p&gt;' . $yValue['title'] . '&lt;/p&gt;
                        &lt;span class="time timeright"&gt;' . $yValue['time'] . '&lt;/span&gt;

                        &lt;a class="videoThumb4" href="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '"&gt;
                            ' . $yValue['description'] . '
                        &lt;/a&gt;
                        &lt;!--&lt;a class="videoThumb4" id="previewbut" href="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '"&gt;
                            Preview
                        &lt;/a&gt;--&gt;

                        &lt;a class="videoThumb4" id="previewbut" href="http://www.youtube.com/watch?v=' . $yValue['videoid'] . '"&gt;
                            Preview
                        &lt;/a&gt;

                        &lt;!--&lt;input class="videoThumb4" onClick="location.href=\'http://www.youtube.com/watch?v=' . $yValue['videoid'] . '\'" type="button" name="previewSel" value="Preview" id="previewbut"&gt;--&gt;

                        &lt;input class="videoThumb4" type="button" name="selectSel" value="Select" id="selectbut"&gt;
                    &lt;/li&gt;                   
                    ';
                }
            }else{
                echo '&lt;li&gt;Sorry, no video\'s found&lt;/li&gt;';
            }
            ?&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;!-- Remove if you don't want the footer shadow --&gt;
        &lt;div style="height:0px; font-size:0em;clear:both;"&gt;&amp;nbsp;&lt;/div&gt;
        &lt;div class="ytfooter ytfooterright"&gt;&amp;nbsp;&lt;/div&gt;
        &lt;!-- END --&gt;
    &lt;/div&gt;

    &lt;?php
    //}
    ?&gt;

&lt;/div&gt;
&lt;!-- END youtube player --&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>
