I have following code where I am planning to show list of videos inside listview (assuming the list of videos or value of src tag is coming from jSON)
<body>
<div data-url="demo-page" data-role="page" id="demo-page" data-theme="d">
<div data-role="header" data-theme="c">
<h1>Videos</h1>
<a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
</div><!-- /header -->
<div data-role="content" id="contentVideosId" class="contentVideosClass">
<div class="video-wrapper" data-iscroll>
<ul data-role="listview" id="video-list" data-split-icon="star" data-theme="d">
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
<li><iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless/></li>
</ul>
</div><!-- /video=wrapper -->
</div><!-- /content -->
<div data-role="panel" id="left-panel" data-theme="c">
<div data-role="listview" >
<ul data-role="listview" data-theme="d">
<li data-icon="delete"><a href="#" data-rel="close">Close</a></li>
<!-- <li data-role="list-divider">PlayList</li> -->
<!-- <li></li> -->
</ul>
</div>
<div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="b" data-content-theme="d">
<div data-role="collapsible" id="staredPlayListDiv">
<h3>Stared PlayList</h3>
<ul data-role="listview" id="staredPlayListUl">
</ul>
</div>
<div data-role="collapsible" id="playListDiv">
<h3>PlayList</h3>
<ul data-role="listview" id="playListUl">
</ul>
</div>
</div> <!-- Collapisble-set end -->
</div><!-- /panel -->
</div>
</body>
I am using following js and css combination
<link rel="stylesheet" href="css/plugin/normalize.css">
<link rel="stylesheet" href="css/plugin/jquery.mobile-1.3.2.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Scripts -->
<script src="js/plugin/jquery-1.9.0.min.js"></script>
<script src="js/plugin/modernizr-2.6.1.min.js"></script>
<script src="js/plugin/jquery.mobile-1.3.2.min.js"></script>
When I am rendering this page in browser I am only able to see the first iframe tag and not all others. Also when I used the chrome debugger to check what all contents are loaded in DOM I can only see 1 iframe element.
Is there any better way to show the list of videos apart from iframe?
I think your iFrame markup is the problem as iFrames are not self closing. Change each of the iFrames to
<iframe title="YouTube video player" width="1000" height="300" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless ></iframe>
Here is a DEMO