Embedding video in a listview

Embedding video in a listview

Hello. I am working on a jQueryMobile native web-app for iOS. Since I am a total noob at coding, please bare with me.

I around about 50 to a 100 videos on a youtube channel that I putting up as my code goes. The videos are episodes for each month. So I started with June (since I have the episode of that old show from only June at the moment). The thing is that since that was the only video for june, everything worked fine.. Working page is at  http://www.ideviceinfo.x10.mx/apping/app/years/data/2009.html [Click June afterwards]

This means that the popup code is good. I have had this code (courtesy of the awesome members here) for many days and apparently I just had a brain fart and lost track of all the problems.. I have been starring at this problem or code for many hours now. The problem is the next month. I have 4 videos for that month.

And here is the code I have been trying to play with. And the code is suppose to work the way the video for June month works.

The code is here and in July category as well:

  1. <html>
  2. <head>
  3. <title>
  4. My App
  5. </title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
  8. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  9. <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  10. </head>
  11. <body>
  12. <br>
  13. <ul data-role="listview" data-filter="true" data-filter-placeholder="Search Episodes..." data-inset="true">
  14. <br>
  15.     
  16.     <li><a href="#popup" data-rel="popup" data-inline="true">
  17. Hasb-E-Haal - 16-07-2009</a></li>
  18.     <li><a href="#popup2" data-rel="popup" data-inline="true">Hasb-E-Haal - 23-07-2009</a></li>
  19.     <li><a href="#popup3" data-rel="popup data-inline="true">Hasb-E-Haal - 25-07-2009 </a></li>
  20.     <li id="rBack"><a href="#popup4" data-rel="popup data-inline="true">Hasb-E-Haal - 30-07-2009</a></li>
  21. </ul>

  22. <!-- popUp code -->

  23. <div data-role="popup" id="popup">
  24. <!-- video player -->
  25. <iframe id="player" type="text/html" width="290" height="260" 
  26. src="http://www.youtube.com/embed/RpCjc--AdRc?rel=0" 
  27. frameborder="0"></iframe>
  28. <!-- end video player -->
  29. CLOSE DIV
  30. <!-- List item 2 -->
  31. <div data-role="popup" id="popup2">
  32. <!-- video player -->
  33. <iframe id="player" type="text/html" width="290" height="260" 
  34. src="http://www.youtube.com/embed/j-N25PQXikk?rel=0" 
  35. frameborder="0"></iframe>
  36. <!-- end list item 2 -->
  37. CLOSE DIV
  38. <!-- List item 3 -->
  39. <div data-role="popup" id="popup3">
  40. <!-- video player -->
  41. <iframe id="player" type="text/html" width="290" height="260" 
  42. src="http://www.youtube.com/embed/fBPG5HEV6zc?rel=0" 
  43. frameborder="0"></iframe>
  44. <!-- End list item 3 -->
  45. CLOSE DIV
  46. <!-- List item 4 -->
  47. <div data-role="popup" id="popup4">
  48. <!-- video player -->
  49. <iframe id="player" type="text/html" width="290" height="260" 
  50. src="http://www.youtube.com/embed/EBB-LqsDjk4?rel=0" 
  51. frameborder="0"></iframe>
  52. <!-- End list item 4 -->

  53. <br>
  54. <center>
  55. <a href="http://www.ideviceinfo.x10.mx/apping/app/index.html" data-icon="home" data-role="button" data-inline="true">Home</a>&nbsp &nbsp
  56. <a href="#rBack" data-icon="back" data-role="button" data-inline="true">Episodes</a>
  57. </center>
  58. </div>


  59. <!-- End popUp code -->
  60. <!-- Bottom Button -->
  61. <center>
  62. <a href="http://www.ideviceinfo.x10.mx/apping/app/years/data/2009.html" data-role="button" data-inline="true">2009 Months</a>
  63. </center>
  64. <!-- End bottom button -->
  65. <!-- Footer Stuff -->
  66. <div data-role="footer" data-id="foo1" data-position="fixed">
  67. <div data-role="navbar">
  68. <ul>
  69. <li><a href="http://www.ideviceinfo.x10.mx/apping/app/index.html">Home</a></li>
  70. <li><a href="http://www.ideviceinfo.x10.mx/apping/app/yList.html">Episodes</a></li>
  71. <li><a href="http://www.ideviceinfo.x10.mx/apping/app/about.html">About</a></li>
  72. </ul>
  73. </div><!-- /navbar -->
  74. </div><!-- /footer -->

  75. </body>
  76. </html>