JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cristianoveloz.com/podcast/js/jquery.keynav.js"></script>
<div class="container-list-podcast">
   <ul class="nav_holder"></ul>
</div>

<video id="myVideo" width="300" height="200" preload="auto" src="http://podcasts.cnn.net/cnn/big/podcasts/ac360/video/2013/08/09/cooper-podcast-8-8.cnn.m4v" type="video/mp4" autoplay controls></video>

CSS

.container-list-podcast ul li.selected{
      background: blue;
}

JavaScript

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fac360%2Frss.xml'%20AND%20itemPath%3D%22%2F%2Fchannel%22&format=json&diagnostics=true&callback=?", function (data) {
         
        // Load Titles patch Json
        console.log(data.query.results.channel.item);
        var titles = data.query.results.channel.item.map(function(item) {
        return item.title;

        });
        var urls = data.query.results.channel.item.map(function(item) {
            return item.origLink;

        });
        console.log(titles);
        $(".container-list-podcast ul").append('<li>' + titles.join('</li><li>'));
        $(".container-list-podcast ul li").each(function(key, value){
            var text = $(this).text();
            $(this).html('<a href="' + urls[key] + '">' + text + '</a>');
        });
        $(".container-list-podcast ul li a").click(function(){
            var href = $(this).attr('href');
            alert(href);
            $("#myvideo").attr("src", href).get(0).play();
            return false;
        })
        // Load Navigation Only Key
            a=$('.nav_holder li').keynav(function() {
                return window.keyNavigationDisabled;
            });
    });