1

言うのは簡単<a href>で、ボタンに同じ機能を持たせることはできますが、機能していません。

これは私のウェブサイトのサンプル リンクです: http://cocopop12.site11.com/search/ . 右側にプレビューと選択の2つのボタンがあるYouTubeプラグインです。

問題は、プレビューをクリックすると YouTube ビデオが再生されることです。しかし、それは機能していません。コードは以下です。

これはリンクです（リンクは機能しています。これをサムネイルにコピーするだけです）：

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

これは、ホバー時に置き換えたいボタンです。

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

jQuery コード:

$(function() {
<!-- videoThumb is a css class found in the foreach list class="videoThumb". ytvideo is the holder ID set as div ID-->
$(".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();
});
});

完全なコード:

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

<!-- Needed for the youtube player -->
<link rel="stylesheet" type="text/css" href="./css/youtubeplaylist.css" />

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.youtubeplaylist-min.js"></script>
<script type="text/javascript">     
        $(function() {
            <!-- videoThumb is a css class found in the foreach list class="videoThumb". ytvideo is the holder ID set as div ID-->
            $(".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();
            });
        });


</script>

    <!-- CSS -->
    <style>
    /************** 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;
    }

    </style>

</head>

<body>

<!-- Needed for the youtube player example 3 -->
<div class="youtubeplayer">
    <?php
    //if ( !isset( $_POST['subKW'] ) ) {
    ?>
    <h2>Search</h2>
    <form method="post" action="<?php echo htmlentities( $_SERVER['PHP_SELF'] ); ?>">
        Input keyword : <input type="text" name="kw" value=""> <br />
        <input type="submit" name="subKW" value="Search">
    </form>
    <?php
    //} else {
    ?>
    <h2>YT Playlist  <a href="index.php">Back</a></h2><!-- END  -->
    <div class="yt_holder yt_holder_right">
        <div id="ytvideo4"></div>
            <!--Up and Down arrow -->
            <div class="you_up"><img src="css/up_arrow.png" alt="+ Slide" title="HIDE" /></div>
            <div class="you_down"><img src="css/down_arrow.png" alt="- Slide" title="SHOW" /></div>
            <!-- END  -->
            <div class="youplayer ytplayerright">
            <ul class="videoyou videoytright">
            <?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->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->set_playlist('AEAD0FC99564BA7F');
            $video->set_max(50);
            $video->set_order('none'); // to retrieve most actual video's
            $video->set_cachexml(false);
            $video->set_cachelife(86400);
            $video->set_xmlpath('./cache/');
            $video->set_start(1);
            // --Set text and description length
            $video->set_descriptionlength(85);
            $video->set_titlelength(25);

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

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

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

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

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

    <?php
    //}
    ?>

</div>
<!-- END youtube player -->


</body>
</html>
4

0 に答える 0