JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" language="javascript">
function videopanel(id) {
str = '<iframe width="100%" height="350" src="http://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
return str;
}
/// 取代原程式的jQuery("#id").bind("click touch" ...之作用 ///
function videochange(id) {
document.getElementById("player").innerHTML = videopanel(id);
}
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content" style="margin:0px 0px 0px 0px; padding:10px 2% 400px 2%; width:96%; height:900px; background-color:#000000;">
<div id="player">
<iframe width="100%" height="350" src="http://www.youtube.com/embed/ANSI0YjVLRg" frameborder="0" allowfullscreen></iframe>
</div>
<br /><br />
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href='javascript:videochange("ANSI0YjVLRg")'>大學生了沒~~~Ken哥,好呷嗎</a></li>
<li><a href='javascript:videochange("LVk2T9gQLro")'>TVBS新聞報導HoJava(賀呷嗎)美食APP</a></li>
<li><a href='javascript:videochange("fiA9jlW0Qto")'>壹電視報導HoJava(賀呷嗎)美食APP</a></li>
<li><a href='javascript:videochange("gOk-Guchg2E")'>新唐人亞太新聞報導HoJava(賀呷嗎)美食APP</a></li>
<li><a href='javascript:videochange("BjZ3U97RPjg")'>TBC台中都會新聞報導HoJava(賀呷嗎)美食APP</a></li>
<li><a href='javascript:videochange("IEvOBoso3Xk")'>威達雲端電訊中都新聞採訪報導HoJava(賀呷嗎)美食APP</a></li>
</ul>
</div>
</div>
...