video-2.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>glass-property</title>
  8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
  9. integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  10. <!-- <link rel="stylesheet" href="./style.css"> -->
  11. </head>
  12. <body style="background-color: #000;">
  13. <section class="sec01">
  14. <div class="card border-0">
  15. <img src="./img/BG_04.webp" class="card-img img-fluid" alt="...">
  16. <div class="card-img-overlay pb-0">
  17. <a style="text-decoration: none; position: absolute; top:15px;" href="./index.html">
  18. <img style="width: 80px;" src="./img/btn/118561.png" alt="">
  19. </a>
  20. <div class="text-center">
  21. <p style="font-size: 48px;color:#fff;" class="propertytitle fw-bold">
  22. 影片導覽</p>
  23. </div>
  24. <div style="margin-top: -10px;" class="pb-5">
  25. <img style="position: relative; z-index: 2; top:15px;" class="img-fluid px-0 w-100"
  26. src="./img/line.png" alt="">
  27. <div style="background-color: #fff;color: #000;" class="py-3">
  28. <div style="margin:0 auto; width: 95%;">
  29. <p style="font-size: 22px;" class="px-0 mb-5">
  30. 春池玻璃 |接班硬世代 三人紀實頻道
  31. </p>
  32. </div>
  33. </div>
  34. </div>
  35. <!-- <div class="tab-content px-0" id="myTabContent">
  36. <div class="tab-pane fade show active text-dark" id="home" role="tabpanel"
  37. aria-labelledby="home-tab">
  38. <style>
  39. .embed-container {
  40. position: relative;
  41. padding-bottom: 56.25%;
  42. height: 0;
  43. overflow: hidden;
  44. max-width: 100%;
  45. }
  46. .embed-container iframe,
  47. .embed-container object,
  48. .embed-container embed {
  49. position: absolute;
  50. top: 0;
  51. left: 0;
  52. width: 100%;
  53. height: 100%;
  54. }
  55. </style>
  56. <div class='embed-container'><iframe src='https://www.youtube.com/embed//M1N7eTCah_w'
  57. frameborder='0' allowfullscreen></iframe></div>
  58. </div>
  59. <div class="tab-pane fade text-dark" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  60. <style>
  61. .embed-container {
  62. position: relative;
  63. padding-bottom: 56.25%;
  64. height: 0;
  65. overflow: hidden;
  66. max-width: 100%;
  67. }
  68. .embed-container iframe,
  69. .embed-container object,
  70. .embed-container embed {
  71. position: absolute;
  72. top: 0;
  73. left: 0;
  74. width: 100%;
  75. height: 100%;
  76. }
  77. </style>
  78. <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
  79. frameborder='0' allowfullscreen></iframe></div>
  80. </div>
  81. <div class="tab-pane fade text-dark" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  82. <style>
  83. .embed-container {
  84. position: relative;
  85. padding-bottom: 56.25%;
  86. height: 0;
  87. overflow: hidden;
  88. max-width: 100%;
  89. }
  90. .embed-container iframe,
  91. .embed-container object,
  92. .embed-container embed {
  93. position: absolute;
  94. top: 0;
  95. left: 0;
  96. width: 100%;
  97. height: 100%;
  98. }
  99. </style>
  100. <div class='embed-container'><iframe src='https://www.youtube.com/embed//Bc27sD2XeyE'
  101. frameborder='0' allowfullscreen></iframe></div>
  102. </div>
  103. <div class="tab-pane fade text-dark" id="contact1" role="tabpanel" aria-labelledby="contact-tab">
  104. <style>
  105. .embed-container {
  106. position: relative;
  107. padding-bottom: 56.25%;
  108. height: 0;
  109. overflow: hidden;
  110. max-width: 100%;
  111. }
  112. .embed-container iframe,
  113. .embed-container object,
  114. .embed-container embed {
  115. position: absolute;
  116. top: 0;
  117. left: 0;
  118. width: 100%;
  119. height: 100%;
  120. }
  121. </style>
  122. <div class='embed-container'><iframe src='https://www.youtube.com/embed//Bc27sD2XeyE'
  123. frameborder='0' allowfullscreen></iframe></div>
  124. </div>
  125. <div class="tab-pane fade text-dark" id="contact2" role="tabpanel" aria-labelledby="contact-tab">
  126. <style>
  127. .embed-container {
  128. position: relative;
  129. padding-bottom: 56.25%;
  130. height: 0;
  131. overflow: hidden;
  132. max-width: 100%;
  133. }
  134. .embed-container iframe,
  135. .embed-container object,
  136. .embed-container embed {
  137. position: absolute;
  138. top: 0;
  139. left: 0;
  140. width: 100%;
  141. height: 100%;
  142. }
  143. </style>
  144. <div class='embed-container'><iframe src='https://www.youtube.com/embed//M1N7eTCah_w'
  145. frameborder='0' allowfullscreen></iframe></div>
  146. </div>
  147. <div class="tab-pane fade text-dark" id="contact3" role="tabpanel" aria-labelledby="contact-tab">
  148. <style>
  149. .embed-container {
  150. position: relative;
  151. padding-bottom: 56.25%;
  152. height: 0;
  153. overflow: hidden;
  154. max-width: 100%;
  155. }
  156. .embed-container iframe,
  157. .embed-container object,
  158. .embed-container embed {
  159. position: absolute;
  160. top: 0;
  161. left: 0;
  162. width: 100%;
  163. height: 100%;
  164. }
  165. </style>
  166. <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
  167. frameborder='0' allowfullscreen></iframe></div>
  168. </div>
  169. <div class="tab-pane fade text-dark" id="contact4" role="tabpanel" aria-labelledby="contact-tab">
  170. <style>
  171. .embed-container {
  172. position: relative;
  173. padding-bottom: 56.25%;
  174. height: 0;
  175. overflow: hidden;
  176. max-width: 100%;
  177. }
  178. .embed-container iframe,
  179. .embed-container object,
  180. .embed-container embed {
  181. position: absolute;
  182. top: 0;
  183. left: 0;
  184. width: 100%;
  185. height: 100%;
  186. }
  187. </style>
  188. <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
  189. frameborder='0' allowfullscreen></iframe></div>
  190. </div>
  191. <div class="tab-pane fade text-dark" id="contact5" role="tabpanel" aria-labelledby="contact-tab">
  192. <style>
  193. .embed-container {
  194. position: relative;
  195. padding-bottom: 56.25%;
  196. height: 0;
  197. overflow: hidden;
  198. max-width: 100%;
  199. }
  200. .embed-container iframe,
  201. .embed-container object,
  202. .embed-container embed {
  203. position: absolute;
  204. top: 0;
  205. left: 0;
  206. width: 100%;
  207. height: 100%;
  208. }
  209. </style>
  210. <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
  211. frameborder='0' allowfullscreen></iframe></div>
  212. </div>
  213. <div class="tab-pane fade text-dark" id="contact6" role="tabpanel" aria-labelledby="contact-tab">
  214. <style>
  215. .embed-container {
  216. position: relative;
  217. padding-bottom: 56.25%;
  218. height: 0;
  219. overflow: hidden;
  220. max-width: 100%;
  221. }
  222. .embed-container iframe,
  223. .embed-container object,
  224. .embed-container embed {
  225. position: absolute;
  226. top: 0;
  227. left: 0;
  228. width: 100%;
  229. height: 100%;
  230. }
  231. </style>
  232. <div class='embed-container'><iframe src='https://www.youtube.com/embed//oMRck77uSLo'
  233. frameborder='0' allowfullscreen></iframe></div>
  234. </div>
  235. </div>
  236. <div class="d-flex justify-content-center text-center mt-3">
  237. <div style="width: 95%; margin:0 auto">
  238. <ul class="nav nav-pills" id="myTab" role="tablist">
  239. <li class="nav-item p-2" role="presentation">
  240. <div class="nav-link active border-0 bg-transparent text-dark px-0" id="home-tab"
  241. data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"
  242. aria-controls="home" aria-selected="true"><img width="216"
  243. src="./img/video/SPRING POOL GLASS W GLASS PROJECT - INFINITY STRAW.webp"
  244. alt="">
  245. </div>
  246. </li>
  247. <li class="nav-item p-2" role="presentation">
  248. <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
  249. data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
  250. aria-controls="profile" aria-selected="false"><img width="216"
  251. src="./img/video/SPRING POOL GLASS W春池計畫_W GLASS PROJECT.webp" alt="">
  252. </div>
  253. </li>
  254. <li class="nav-item p-2" role="presentation">
  255. <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
  256. data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
  257. aria-controls="profile" aria-selected="false"><img width="216"
  258. src="./img/video/SPRING POOL GLASS | W Hotel x W Glass Project W春池計畫.webp"
  259. alt=""></div>
  260. </li>
  261. <li class="nav-item p-2" role="presentation">
  262. <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
  263. data-bs-toggle="tab" data-bs-target="#contact1" type="button" role="tab"
  264. aria-controls="contact" aria-selected="false"><img width="216"
  265. src="./img/video/春池玻璃 x 曾志偉- 忠泰Home2025想家計畫.webp" alt="">
  266. </div>
  267. </li>
  268. <li class="nav-item p-2" role="presentation">
  269. <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
  270. data-bs-toggle="tab" data-bs-target="#contact2" type="button" role="tab"
  271. aria-controls="contact" aria-selected="false"><img width="216"
  272. src="./img/video/春池玻璃 |接班硬世代 三人紀實頻道.webp" alt="">
  273. </div>
  274. </li>
  275. <li class="nav-item p-2" role="presentation">
  276. <div class="nav-link border-0 bg-transparent text-dark px-0" id="contact-tab"
  277. data-bs-toggle="tab" data-bs-target="#contact3" type="button" role="tab"
  278. aria-controls="contact" aria-selected="false"><img width="216"
  279. src="./img/video/春池玻璃X三鶯部落 用回收玻璃創造笑容 原住民自力造屋.webp" alt="">
  280. </div>
  281. </li>
  282. <li class="nav-item p-2" role="presentation">
  283. <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
  284. data-bs-toggle="tab" data-bs-target="#contact4" type="button" role="tab"
  285. aria-controls="profile" aria-selected="false"><img width="216"
  286. src="./img/video/春池玻璃X杜祖業 用回收玻璃創造新意義 (城市篇).webp" alt="">
  287. </div>
  288. </li>
  289. <li class="nav-item p-2" role="presentation">
  290. <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
  291. data-bs-toggle="tab" data-bs-target="#contact5" type="button" role="tab"
  292. aria-controls="profile" aria-selected="false"><img width="216"
  293. src="./img/video/春池玻璃X格式 2017文博會主題館 我們在文化裡爆炸.webp" alt="">
  294. </div>
  295. </li>
  296. <li class="nav-item p-2" role="presentation">
  297. <div class="nav-link border-0 bg-transparent text-dark px-0" id="profile-tab"
  298. data-bs-toggle="tab" data-bs-target="#contact6" type="button" role="tab"
  299. aria-controls="profile" aria-selected="false"><img width="216"
  300. src="./img/video/春池玻璃X蔡英文 蔡總統蒞臨春池玻璃 20160919.webp" alt="">
  301. </div>
  302. </li>
  303. </ul>
  304. </div>
  305. </div> -->
  306. <div>
  307. <style>
  308. .embed-container {
  309. position: relative;
  310. padding-bottom: 56.25%;
  311. height: 0;
  312. overflow: hidden;
  313. max-width: 100%;
  314. }
  315. .embed-container iframe,
  316. .embed-container object,
  317. .embed-container embed {
  318. position: absolute;
  319. top: 0;
  320. left: 0;
  321. width: 100%;
  322. height: 100%;
  323. }
  324. </style>
  325. <div class='embed-container'><iframe class='youtube-video'
  326. src='https://www.youtube.com/embed//_hNmjXJ6lNM?autoplay=1' frameborder='0' allowfullscreen
  327. height="394" allow="autoplay;"></iframe></div>
  328. </div>
  329. <div class='video-cover mt-3'>
  330. <div class="row px-0 mx-0">
  331. <div class="col-4 p-2">
  332. <img class="video-img img-fluid" data-info="_hNmjXJ6lNM"
  333. src="./img/video/SPRING POOL GLASS W GLASS PROJECT - INFINITY STRAW.webp" alt="">
  334. </div>
  335. <div class="col-4 p-2">
  336. <img class="video-img img-fluid" data-info="y87GknOuwaI"
  337. src="./img/video/SPRING POOL GLASS W春池計畫_W GLASS PROJECT.webp" alt="">
  338. </div>
  339. <div class="col-4 p-2">
  340. <img class="video-img img-fluid" data-info="_sxluHDac-Q"
  341. src="./img/video/SPRING POOL GLASS | W Hotel x W Glass Project W春池計畫.webp" alt="">
  342. </div>
  343. <div class="col-4 p-2">
  344. <img class="video-img img-fluid" data-info="ieDVIEjBQe0"
  345. src="./img/video/春池玻璃 x 曾志偉- 忠泰Home2025想家計畫.webp" alt="">
  346. </div>
  347. <div class="col-4 p-2">
  348. <img class="video-img img-fluid" data-info="6TPo1hG-4eA"
  349. src="./img/video/春池玻璃 |接班硬世代 三人紀實頻道.webp" alt="">
  350. </div>
  351. <div class="col-4 p-2">
  352. <img class="video-img img-fluid" data-info="9hteKpRwc-E" src="./img/video/春池玻璃X三鶯部落 用回收玻璃創造笑容 原住民自力造屋.webp" alt="">
  353. </div>
  354. <div class="col-4 p-2">
  355. <img class="video-img img-fluid" data-info="92x1O51Ielc" src="./img/video/春池玻璃X杜祖業 用回收玻璃創造新意義 (城市篇).webp" alt="">
  356. </div>
  357. <div class="col-4 p-2">
  358. <img class="video-img img-fluid" data-info="XsKFEj2H73s" src="./img/video/春池玻璃X格式 2017文博會主題館 我們在文化裡爆炸.webp" alt="">
  359. </div>
  360. <div class="col-4 p-2">
  361. <img class="video-img img-fluid" data-info="H2RFuRN_aO8" src="./img/video/春池玻璃X蔡英文 蔡總統蒞臨春池玻璃 20160919.webp" alt="">
  362. </div>
  363. </div>
  364. </div>
  365. </div>
  366. </div>
  367. </section>
  368. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  369. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  370. crossorigin="anonymous"></script>
  371. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  372. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  373. crossorigin="anonymous"></script>
  374. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  375. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  376. <script src="./lan.js"></script>
  377. <script>
  378. $(".video-img").click(function () {
  379. var videosrc = $(this).data("info");
  380. $('.youtube-video').attr('src', `https://www.youtube.com/embed//${videosrc}?autoplay=1`);
  381. });
  382. // $(".usecase-imgfr").click(function () {
  383. // let ytid = $(this).data('ytid');
  384. // $('.youtube-video').attr('src', `https://www.youtube.com/embed//${ytid}?autoplay=1`);
  385. // });
  386. $(".btn-close").click(function () {
  387. $('.youtube-video').attr('src', ``);
  388. });
  389. $('#exampleModal').on('hidden.bs.modal', function () {
  390. $('.youtube-video').attr('src', ``);
  391. });
  392. </script>
  393. </body>
  394. </html>