Как сделать текст с использованием JavaScript и API YouTube кликабельным

Прямо сейчас у меня есть базовая страница HTML, которая получает самые популярные видео с использованием YouTube API. Пока он показывает название видео, но я пытаюсь сделать эти заголовки кликабельными. Если щелкнуть заголовок, его просто перенесут в видео на YouTube. Я знаю, что теоретически я мог бы просто найти самые популярные видео, а затем сделать кликабельную ссылку, но я хочу, чтобы это более или менее автоматически обновлялось каждый раз, когда новое популярное видео было найдено с помощью API YouTube. Прямо сейчас у меня есть этот основной код.

<html>
<head>
<title>My Videos</title>
<style>
.titlec {
    font-size: small;
}
ul.videos li {
    float: left;
    width: 10em;
    margin-bottom: 1em;
}
ul.videos {
    margin-bottom: 1em;
    padding-left : 0em;
    margin-left: 0em;
    list-style: none;
}
</style>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">

function showData(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t.substr(0, 20);
  //  var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    html.push('<span class="titlec">', title, '...</span><br /></span></li>');
  }
// html.push('</ul><br style="clear: left;"/>');
  document.getElementById('videos2').innerHTML = html.join('');
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
  <object id="player">
  </object>
</div>
<div id="videos2"></div>
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>
</html>
Источник

1 ответ

Я не уверен, что я точно понимаю, чего вы пытаетесь достичь, но я создал jsfiddle!

Вот код:

<html>    
<head>
    <title>My Videos</title>
    <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
    <script type="text/javascript">
        function showData(data) {
            var feed = data.feed;
            var entries = feed.entry || [];
            var html = ['<ul class="videos">'];
            for (var i = 0; i < entries.length; i++) {
                var entry = entries[i];
                var title = entry.title.$t.substr(0, 20);
        html.push('<li class="titlec"><a href="javascript:void(0);" onClick="loadVideo('+"'"+ entry.media$group.media$content[0].url +"'"+');">' + title + '</a></li>');
            }

            document.getElementById('videos2').innerHTML = html.join('') + '</ul>';
            if (entries.length > 0) {
                loadVideo(entries[0].media$group.media$content[0].url);
            }
        }

        function loadVideo(e) {
            var container = document.getElementById('playerContainer');
            var player = document.getElementById('player');
            container.removeChild(player);//remove object child
            player.setAttribute('data',e);//change link
            container.appendChild(player);//add object back
        }
    </script>
</head>

<body>
    <div id="playerContainer" style="width: 20em; height: 180px; float: left;">
        <object id="player"></object>
    </div>
    <div id="videos2"></div>
    <script type="text/javascript" src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">

    </script>
</body>

Источник
Другие вопросы по тегам