電子書籍の厳選無料作品が豊富！

colorbox (オーバレイでの向きの変更)

締切済

  • 質問者：kokoiti0301
  • 質問日時：
  • 回答数：1件

スマートホンで使用する、以下のようなものを実装したいです。
リストでyoutubeの一覧を表示し、該当の項目を押した場合にオーバレイで表示したです。
このときに表示するyoutubeを再生するオーバーレイを横向きに表示したいです。
（youtube動画をできるだけ大きい表示にしたいため。）

jQueryRotate　などをしらべてみましたがどうもうまくいきませんでした。
わかるかたがいらっしゃいましたらご教示ください。

以下実装中のソースです
------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>サンプルプログラム</title>

<link rel="stylesheet" href="../jquerymobile/jquery.mobile-1.4.0.css" />
<script src="../jquerymobile/jquery.js"></script>
<script src="../jquerymobile/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" href="../mobile/plugin/iconpack/original/jqm-icon-pack-2.0-original.css" />
<script src="colorbox-master/jquery.colorbox.js"></script>

<style type="text/css">
.footer p {
text-align: center;
margin: 5px 10px;
font-weight: normal;
font-size: .8em;
}

#list .ui-li-has-thumb {
overflow: hidden;
height: 60px;
}

</style>

<script type="text/javascript"><!--
$(document).on("pageinit", function(){

xmlLoad();

function xmlLoad(e){
$.mobile.loader('show');
var w = $(window).width();
var h = $(window).height();
var url = 'http://gdata.youtube.com/feeds/api/videos?vq=音楽&alt=json';

$.ajax({
url: url,
dataType: 'json',
success: function (json) {
var feed = json.feed;
var entries = feed.entry || [];
for (var i = 0; i < entries.length; i++) {

var entry = entries[i];

var url = entry.link[0].href;
var title = entry.title.$t;
var thumbnail_url = entry.media$group.media$thumbnail[0].url;
var thumbnail = '<img src="'+thumbnail_url+'" />';
url = "http://www.youtube.com/embed/ibmU7xfgcMk";
var html = '<li><a href="'+url+'" target="_self" class="youtube">'+thumbnail+title+'</a></li>';
console.log(html);
$('#list').append(html);
}
$(".youtube").colorbox({
iframe:true,
innerWidth:w*0.8,
innerHeight:h*0.8,
});
//refresh
$('#list').listview('refresh');

//
$.mobile.loader('hide');
}
});

}

});


// --></script>

</head>
<body>

<div data-role="page">
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="false" id="list">
</ul>
</div>

</div>

</body>
</html>
------------------------------------------------------

通報する

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

質問の本文を隠す

A 回答 (1件)

参考程度に

No.1

  • 回答者： fujillin
  • 回答日時：

スマホは全然わからないので、単にググっただけですが・・・



このあたりかな？
http://wikiwiki.jp/android/?%B2%E8%CC%CC%A4%CE%B …
http://developer.android.com/guide/topics/manife …
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報