youtubeをHPに載せたいです。

解決済

質問者：taku_pon
質問日時：2010/05/08 20:29
回答数：2件

youtubeをHPに載せたいです。
１ページに５つのラジオボタンをつけて
選択して実行すると枠の中にyoutubeが再生されるようなものは作れるのでしょうか。
無料のホームページなのでjavascriptしか動きません。
フレームで仕切ればできそうな気がするのですが・・・

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： nn1102
回答日時：2010/05/10 16:36

DOM を使えばできると思います。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" >
<title>タイトル</title></head>
<body>
<script type="text/javascript">

</script>
<div>
<input type="radio" name="myGroup" value="1" onclick="javascript:setMovie(1)">動画1
<input type="radio" name="myGroup" value="2" onclick="javascript:setMovie(2)">動画2
</div>
<div id="selectedMovie"></div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2010/05/10 17:15

Google提供の「YouTube JavaScript Player API 」を使っても出来ます。

http://code.google.com/intl/ja/apis/youtube/js_a …
（例）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("swfobject", "2.1");
</script>
</head>
<body>
<div>
<form action="#">
<input type="radio" name="youtube" value="0" checked>犬
<input type="radio" name="youtube" value="1">猫
<button onclick='creatSWF()'>切り替え</button>
</form>
</div>
<div id="contener">
<div id="ytapiplayer"></div>
</div>
<script type="text/javascript" charset="utf-8">
swfobject.addLoadEvent(function(){
creatSWF();
});
function creatSWF(){
play_url=["http://www.youtube.com/v/IQUtXsIuBAU?f=videos&ap …
"http://www.youtube.com/v/nuJHenDGUa8?f=videos&ap …];
var check=document.getElementsByName("youtube");
for(var i=0;i<check.length;i++){
if(check[i].checked){
var url= play_url[parseInt(check[i].value)];
}
}
var ytplayer = document.getElementById("ytplayer");
if(!ytplayer){
var ytapiplayer = document.getElementById("ytapiplayer");
if(!ytapiplayer){
var div = document.createElement("div");
div.setAttribute("id", "ytapiplayer");
document.getElementById("contener").appendChild(div);
}
swfobject.embedSWF(url+'&rel=0&autoplay=1&disablekb=1&egm=1'+
'&enablejsapi=1&playerapiid=ytplayer',"ytapiplayer",
"250", "200", "8", null, null,
{allowScriptAccess:"always"},{id:"ytplayer"});
}else{
ytplayer.stopVideo();
ytplayer.clearVideo();
swfobject.removeSWF('ytplayer');
creatSWF();
}
}
function onYouTubePlayerReady(){
ytplayer = document.getElementById("ytplayer");
ytplayer.addEventListener("onStateChange","on_ytplayer_StateChange");
}
function on_ytplayer_StateChange(state){
if (state==0){
creatSWF();
}
}
</script>
</body>
</html>