video.html 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806
  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>Ai_Anchor_Video</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 id="top">
  13. <section style="position: relative;">
  14. <div class="video-sec01 card border-0">
  15. <!-- <img src="./img/T1.png" class="card-img img-fluid" alt="..."> -->
  16. <div class="card-img-overlay pb-0">
  17. <div class="ai-spokesgril">
  18. <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
  19. href="./index.html"><img class="me-3" style="width: 50px;" src="./img/圖片1.png" alt="">AI
  20. Spokesgirl</a>
  21. <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
  22. <li class="nav-item dropdown">
  23. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
  24. data-bs-toggle="dropdown" aria-expanded="false">
  25. 中/En
  26. </a>
  27. <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  28. <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en"
  29. onclick="changeLan(this)" value="en">English</button></li>
  30. <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
  31. onclick="changeLan(this)" value="zh">中文</button></li>
  32. </ul>
  33. </li>
  34. </ul>
  35. </div>
  36. <section class="video-int text-center" style="margin-top:100px;">
  37. <div class="video-box">
  38. <button type="button" data-gt-target="#5G-video" data-gt-duration="800" data-gt-offset="0"
  39. class="video-btn" set-lan="html:5G_network">5G網路</button>
  40. </div>
  41. <div class="video-box">
  42. <button type="button" data-gt-target="#NFT-video" data-gt-duration="800" data-gt-offset="0"
  43. class="video-btn">NFT</button>
  44. </div>
  45. <div class="video-box">
  46. <button type="button" data-gt-target="#metaverse-video" data-gt-duration="800"
  47. data-gt-offset="0" class="video-btn" set-lan="html:metaverse">元宇宙</button>
  48. </div>
  49. <div class="video-box">
  50. <button type="button" data-gt-target="#dailypaper-video" data-gt-duration="800"
  51. data-gt-offset="0" class="video-btn" set-lan="html:local_news">地方日報</button>
  52. </div>
  53. <div class="video-box">
  54. <button type="button" data-gt-target="#VTuber-video" data-gt-duration="800" data-gt-offset="0"
  55. class="video-btn">VTuber</button>
  56. </div>
  57. </section>
  58. </div>
  59. </div>
  60. <img id='gotop' width="50" data-gt-target="#top" data-gt-duration="500" data-gt-offset="0" src="./img/go-up.png"
  61. alt="">
  62. </section>
  63. <div style="margin-top: 100px;">
  64. <!-- 5G -->
  65. <section class="sec-video" id='5G-video'>
  66. <h1 class="p-2" set-lan="html:5G_network">5G網路</h1>
  67. <div class="row row-cols-lg-3 px-0 mx-0">
  68. <div class="col">
  69. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//iZxOOUPWL-Q?enablejsapi=1"
  70. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1007_YT封面_NFT.png" alt="">
  71. </div>
  72. <div class="col">
  73. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//NWyxxTfBAmA?enablejsapi=1"
  74. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1005_YT封面_NFT.png" alt="">
  75. </div>
  76. <div class="col">
  77. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//C0EHKQX-B4M?enablejsapi=1"
  78. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1006_YT封面_NFT.png" alt="">
  79. </div>
  80. </div>
  81. <!--
  82. <div class="closeplay modal fade" id="exampleModal01" tabindex="-1" aria-labelledby="exampleModalLabel1"
  83. aria-hidden="true">
  84. <div class="modal-dialog modal-lg">
  85. <div class="modal-content bg-transparent border-0">
  86. <div class="modal-header border-0">
  87. <h5 class="modal-title" id="exampleModalLabel"></h5>
  88. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  89. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  90. </div>
  91. <div class="modal-body">
  92. <style>
  93. .embed-container {
  94. position: relative;
  95. padding-bottom: 56.25%;
  96. height: 0;
  97. overflow: hidden;
  98. max-width: 100%;
  99. }
  100. .embed-container iframe,
  101. .embed-container object,
  102. .embed-container embed {
  103. position: absolute;
  104. top: 0;
  105. left: 0;
  106. width: 100%;
  107. height: 100%;
  108. }
  109. </style>
  110. <div class='embed-container'><iframe src='https://www.youtube.com/embed//iZxOOUPWL-Q'
  111. frameborder='0' allowfullscreen></iframe></div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="closeplay modal fade" id="exampleModal02" tabindex="-1" aria-labelledby="exampleModalLabel1"
  117. aria-hidden="true">
  118. <div class="modal-dialog modal-lg">
  119. <div class="modal-content bg-transparent border-0">
  120. <div class="modal-header border-0">
  121. <h5 class="modal-title" id="exampleModalLabel"></h5>
  122. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  123. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  124. </div>
  125. <div class="modal-body">
  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//NWyxxTfBAmA'
  145. frameborder='0' allowfullscreen></iframe></div>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. <div class="closeplay modal fade" id="exampleModal03" tabindex="-1" aria-labelledby="exampleModalLabel1"
  151. aria-hidden="true">
  152. <div class="modal-dialog modal-lg">
  153. <div class="modal-content bg-transparent border-0">
  154. <div class="modal-header border-0">
  155. <h5 class="modal-title" id="exampleModalLabel"></h5>
  156. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  157. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  158. </div>
  159. <div class="modal-body">
  160. <style>
  161. .embed-container {
  162. position: relative;
  163. padding-bottom: 56.25%;
  164. height: 0;
  165. overflow: hidden;
  166. max-width: 100%;
  167. }
  168. .embed-container iframe,
  169. .embed-container object,
  170. .embed-container embed {
  171. position: absolute;
  172. top: 0;
  173. left: 0;
  174. width: 100%;
  175. height: 100%;
  176. }
  177. </style>
  178. <div class='embed-container'><iframe src='https://www.youtube.com/embed//C0EHKQX-B4M'
  179. frameborder='0' allowfullscreen></iframe></div>
  180. </div>
  181. </div>
  182. </div>
  183. </div> -->
  184. </section>
  185. <!-- NFT -->
  186. <section class="sec-video" id='NFT-video'>
  187. <h1 class="p-2">NFT</h1>
  188. <div class="row row-cols-lg-3 px-0 mx-0">
  189. <div class="col">
  190. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//LKOLD4ssEIA?enablejsapi=1"
  191. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0818_YT封面_NFT.png" alt="">
  192. </div>
  193. <div class="col">
  194. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//QVYsivxltkg?enablejsapi=1"
  195. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0819_YT封面_NFT.png" alt="">
  196. </div>
  197. <div class="col">
  198. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//-udbHXGkqJM?enablejsapi=1"
  199. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0907_YT封面_NFT.png" alt="">
  200. </div>
  201. </div>
  202. <!-- <div class="closeplay modal fade" id="NFT-video01" tabindex="-1" aria-labelledby="exampleModalLabel"
  203. aria-hidden="true">
  204. <div class="modal-dialog modal-lg">
  205. <div class="modal-content bg-transparent border-0">
  206. <div class="modal-header border-0">
  207. <h5 class="modal-title" id="exampleModalLabel"></h5>
  208. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  209. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  210. </div>
  211. <div class="modal-body">
  212. <style>
  213. .embed-container {
  214. position: relative;
  215. padding-bottom: 56.25%;
  216. height: 0;
  217. overflow: hidden;
  218. max-width: 100%;
  219. }
  220. .embed-container iframe,
  221. .embed-container object,
  222. .embed-container embed {
  223. position: absolute;
  224. top: 0;
  225. left: 0;
  226. width: 100%;
  227. height: 100%;
  228. }
  229. </style>
  230. <div class='embed-container'><iframe src='https://www.youtube.com/embed//LKOLD4ssEIA'
  231. frameborder='0' allowfullscreen></iframe></div>
  232. </div>
  233. </div>
  234. </div>
  235. </div>
  236. <div class="closeplay modal fade" id="NFT-video02" tabindex="-1" aria-labelledby="exampleModalLabel"
  237. aria-hidden="true">
  238. <div class="modal-dialog modal-lg">
  239. <div class="modal-content bg-transparent border-0">
  240. <div class="modal-header border-0">
  241. <h5 class="modal-title" id="exampleModalLabel"></h5>
  242. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  243. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  244. </div>
  245. <div class="modal-body">
  246. <style>
  247. .embed-container {
  248. position: relative;
  249. padding-bottom: 56.25%;
  250. height: 0;
  251. overflow: hidden;
  252. max-width: 100%;
  253. }
  254. .embed-container iframe,
  255. .embed-container object,
  256. .embed-container embed {
  257. position: absolute;
  258. top: 0;
  259. left: 0;
  260. width: 100%;
  261. height: 100%;
  262. }
  263. </style>
  264. <div class='embed-container'><iframe src='https://www.youtube.com/embed//QVYsivxltkg'
  265. frameborder='0' allowfullscreen></iframe></div>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. <div class="closeplay modal fade" id="NFT-video03" tabindex="-1" aria-labelledby="exampleModalLabel"
  271. aria-hidden="true">
  272. <div class="modal-dialog modal-lg">
  273. <div class="modal-content bg-transparent border-0">
  274. <div class="modal-header border-0">
  275. <h5 class="modal-title" id="exampleModalLabel"></h5>
  276. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  277. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  278. </div>
  279. <div class="modal-body">
  280. <style>
  281. .embed-container {
  282. position: relative;
  283. padding-bottom: 56.25%;
  284. height: 0;
  285. overflow: hidden;
  286. max-width: 100%;
  287. }
  288. .embed-container iframe,
  289. .embed-container object,
  290. .embed-container embed {
  291. position: absolute;
  292. top: 0;
  293. left: 0;
  294. width: 100%;
  295. height: 100%;
  296. }
  297. </style>
  298. <div class='embed-container'><iframe src='https://www.youtube.com/embed//-udbHXGkqJM'
  299. frameborder='0' allowfullscreen></iframe></div>
  300. </div>
  301. </div>
  302. </div>
  303. </div> -->
  304. </section>
  305. <!-- metaverse -->
  306. <section class="sec-video" id='metaverse-video'>
  307. <h1 class="p-2" set-lan="html:metaverse">元宇宙</h1>
  308. <div class="row row-cols-lg-3 px-0 mx-0">
  309. <div class="col">
  310. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//hoSKF4X5OgU?enablejsapi=1"
  311. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0923_IG封面_NFT.png" alt="">
  312. </div>
  313. <div class="col">
  314. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//QQBzJwHjMlk?enablejsapi=1"
  315. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0927_YT封面_NFT.png" alt="">
  316. </div>
  317. <div class="col">
  318. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//LsS2SXQ1wrs?enablejsapi=1"
  319. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/1001_YT封面_NFT.png" alt="">
  320. </div>
  321. </div>
  322. <!-- <div class="closeplay modal fade" id="metaverse01" tabindex="-1" aria-labelledby="exampleModalLabel2"
  323. aria-hidden="true">
  324. <div class="modal-dialog modal-lg">
  325. <div class="modal-content bg-transparent border-0">
  326. <div class="modal-header border-0">
  327. <h5 class="modal-title" id="exampleModalLabel"></h5>
  328. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  329. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  330. </div>
  331. <div class="modal-body">
  332. <style>
  333. .embed-container {
  334. position: relative;
  335. padding-bottom: 56.25%;
  336. height: 0;
  337. overflow: hidden;
  338. max-width: 100%;
  339. }
  340. .embed-container iframe,
  341. .embed-container object,
  342. .embed-container embed {
  343. position: absolute;
  344. top: 0;
  345. left: 0;
  346. width: 100%;
  347. height: 100%;
  348. }
  349. </style>
  350. <div class='embed-container'><iframe src='https://www.youtube.com/embed//hoSKF4X5OgU'
  351. frameborder='0' allowfullscreen></iframe></div>
  352. </div>
  353. </div>
  354. </div>
  355. </div>
  356. <div class="closeplay modal fade" id="metaverse02" tabindex="-1" aria-labelledby="exampleModalLabel2"
  357. aria-hidden="true">
  358. <div class="modal-dialog modal-lg">
  359. <div class="modal-content bg-transparent border-0">
  360. <div class="modal-header border-0">
  361. <h5 class="modal-title" id="exampleModalLabel"></h5>
  362. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  363. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  364. </div>
  365. <div class="modal-body">
  366. <style>
  367. .embed-container {
  368. position: relative;
  369. padding-bottom: 56.25%;
  370. height: 0;
  371. overflow: hidden;
  372. max-width: 100%;
  373. }
  374. .embed-container iframe,
  375. .embed-container object,
  376. .embed-container embed {
  377. position: absolute;
  378. top: 0;
  379. left: 0;
  380. width: 100%;
  381. height: 100%;
  382. }
  383. </style>
  384. <div class='embed-container'><iframe src='https://www.youtube.com/embed//QQBzJwHjMlk'
  385. frameborder='0' allowfullscreen></iframe></div>
  386. </div>
  387. </div>
  388. </div>
  389. </div>
  390. <div class="closeplay modal fade" id="metaverse03" tabindex="-1" aria-labelledby="exampleModalLabel2"
  391. aria-hidden="true">
  392. <div class="modal-dialog modal-lg">
  393. <div class="modal-content bg-transparent border-0">
  394. <div class="modal-header border-0">
  395. <h5 class="modal-title" id="exampleModalLabel"></h5>
  396. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  397. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  398. </div>
  399. <div class="modal-body">
  400. <style>
  401. .embed-container {
  402. position: relative;
  403. padding-bottom: 56.25%;
  404. height: 0;
  405. overflow: hidden;
  406. max-width: 100%;
  407. }
  408. .embed-container iframe,
  409. .embed-container object,
  410. .embed-container embed {
  411. position: absolute;
  412. top: 0;
  413. left: 0;
  414. width: 100%;
  415. height: 100%;
  416. }
  417. </style>
  418. <div class='embed-container'><iframe src='https://www.youtube.com/embed//LsS2SXQ1wrs'
  419. frameborder='0' allowfullscreen></iframe></div>
  420. </div>
  421. </div>
  422. </div>
  423. </div> -->
  424. </section>
  425. <!-- dailypaper -->
  426. <section class="sec-video" id='dailypaper-video'>
  427. <h1 class="p-2" set-lan="html:local_news">地方日報</h1>
  428. <div class="row row-cols-lg-3 px-0 mx-0">
  429. <div class="col">
  430. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//EuI2Lh2FWDo?enablejsapi=1"
  431. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0923(1)_YT封面_地方.png" alt="">
  432. </div>
  433. <div class="col">
  434. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//YQx_3O8W7hM?enablejsapi=1"
  435. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0917(03)_YT封面_地方.png"
  436. alt="">
  437. </div>
  438. <div class="col">
  439. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//kzQKfJyQHc0?enablejsapi=1"
  440. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0924(02)_YT封面_地方.png"
  441. alt="">
  442. </div>
  443. </div>
  444. <!-- <div class="closeplay modal fade" id="dailypaper01" tabindex="-1" aria-labelledby="exampleModalLabel2"
  445. aria-hidden="true">
  446. <div class="modal-dialog modal-lg">
  447. <div class="modal-content bg-transparent border-0">
  448. <div class="modal-header border-0">
  449. <h5 class="modal-title" id="exampleModalLabel"></h5>
  450. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  451. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  452. </div>
  453. <div class="modal-body">
  454. <style>
  455. .embed-container {
  456. position: relative;
  457. padding-bottom: 56.25%;
  458. height: 0;
  459. overflow: hidden;
  460. max-width: 100%;
  461. }
  462. .embed-container iframe,
  463. .embed-container object,
  464. .embed-container embed {
  465. position: absolute;
  466. top: 0;
  467. left: 0;
  468. width: 100%;
  469. height: 100%;
  470. }
  471. </style>
  472. <div class='embed-container'><iframe src='https://www.youtube.com/embed//EuI2Lh2FWDo'
  473. frameborder='0' allowfullscreen></iframe></div>
  474. </div>
  475. </div>
  476. </div>
  477. </div>
  478. <div class="closeplay modal fade" id="dailypaper02" tabindex="-1" aria-labelledby="exampleModalLabel2"
  479. aria-hidden="true">
  480. <div class="modal-dialog modal-lg">
  481. <div class="modal-content bg-transparent border-0">
  482. <div class="modal-header border-0">
  483. <h5 class="modal-title" id="exampleModalLabel"></h5>
  484. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  485. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  486. </div>
  487. <div class="modal-body">
  488. <style>
  489. .embed-container {
  490. position: relative;
  491. padding-bottom: 56.25%;
  492. height: 0;
  493. overflow: hidden;
  494. max-width: 100%;
  495. }
  496. .embed-container iframe,
  497. .embed-container object,
  498. .embed-container embed {
  499. position: absolute;
  500. top: 0;
  501. left: 0;
  502. width: 100%;
  503. height: 100%;
  504. }
  505. </style>
  506. <div class='embed-container'><iframe src='https://www.youtube.com/embed//YQx_3O8W7hM'
  507. frameborder='0' allowfullscreen></iframe></div>
  508. </div>
  509. </div>
  510. </div>
  511. </div>
  512. <div class="closeplay modal fade" id="dailypaper03" tabindex="-1" aria-labelledby="exampleModalLabel2"
  513. aria-hidden="true">
  514. <div class="modal-dialog modal-lg">
  515. <div class="modal-content bg-transparent border-0">
  516. <div class="modal-header border-0">
  517. <h5 class="modal-title" id="exampleModalLabel"></h5>
  518. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  519. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  520. </div>
  521. <div class="modal-body">
  522. <style>
  523. .embed-container {
  524. position: relative;
  525. padding-bottom: 56.25%;
  526. height: 0;
  527. overflow: hidden;
  528. max-width: 100%;
  529. }
  530. .embed-container iframe,
  531. .embed-container object,
  532. .embed-container embed {
  533. position: absolute;
  534. top: 0;
  535. left: 0;
  536. width: 100%;
  537. height: 100%;
  538. }
  539. </style>
  540. <div class='embed-container'><iframe src='https://www.youtube.com/embed//kzQKfJyQHc0'
  541. frameborder='0' allowfullscreen></iframe></div>
  542. </div>
  543. </div>
  544. </div>
  545. </div> -->
  546. </section>
  547. <!-- vtuber -->
  548. <section class="sec-video" id='VTuber-video'>
  549. <h1 class="p-2">VTuber</h1>
  550. <div class="row row-cols-lg-3 px-0 mx-0">
  551. <div class="col">
  552. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//ie31G94r7QE?enablejsapi=1"
  553. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0726_YT封面_Vtuber.png"
  554. alt="">
  555. </div>
  556. <div class="col">
  557. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//QIbinFBjJxA?enablejsapi=1"
  558. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0727_YT封面_Vtuber.png"
  559. alt="">
  560. </div>
  561. <div class="col">
  562. <img class="video-img img-fluid" data-info="https://www.youtube.com/embed//6JVBDIM7zac?enablejsapi=1"
  563. data-bs-toggle="modal" data-bs-target="#exampleModal" src="./img/封面/0804_YT封面_Vtuber.png"
  564. alt="">
  565. </div>
  566. </div>
  567. <!-- <div class="closeplay modal fade" id="VTuber01" tabindex="-1" aria-labelledby="exampleModalLabel2"
  568. aria-hidden="true">
  569. <div class="modal-dialog modal-lg">
  570. <div class="modal-content bg-transparent border-0">
  571. <div class="modal-header border-0">
  572. <h5 class="modal-title" id="exampleModalLabel"></h5>
  573. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  574. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  575. </div>
  576. <div class="modal-body">
  577. <style>
  578. .embed-container {
  579. position: relative;
  580. padding-bottom: 56.25%;
  581. height: 0;
  582. overflow: hidden;
  583. max-width: 100%;
  584. }
  585. .embed-container iframe,
  586. .embed-container object,
  587. .embed-container embed {
  588. position: absolute;
  589. top: 0;
  590. left: 0;
  591. width: 100%;
  592. height: 100%;
  593. }
  594. </style>
  595. <div class='embed-container'><iframe src='https://www.youtube.com/embed//ie31G94r7QE'
  596. frameborder='0' allowfullscreen></iframe></div>
  597. </div>
  598. </div>
  599. </div>
  600. </div>
  601. <div class="closeplay modal fade" id="VTuber02" tabindex="-1" aria-labelledby="exampleModalLabel2"
  602. aria-hidden="true">
  603. <div class="modal-dialog modal-lg">
  604. <div class="modal-content bg-transparent border-0">
  605. <div class="modal-header border-0">
  606. <h5 class="modal-title" id="exampleModalLabel"></h5>
  607. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  608. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  609. </div>
  610. <div class="modal-body">
  611. <style>
  612. .embed-container {
  613. position: relative;
  614. padding-bottom: 56.25%;
  615. height: 0;
  616. overflow: hidden;
  617. max-width: 100%;
  618. }
  619. .embed-container iframe,
  620. .embed-container object,
  621. .embed-container embed {
  622. position: absolute;
  623. top: 0;
  624. left: 0;
  625. width: 100%;
  626. height: 100%;
  627. }
  628. </style>
  629. <div class='embed-container'><iframe src='https://www.youtube.com/embed//QIbinFBjJxA'
  630. frameborder='0' allowfullscreen></iframe></div>
  631. </div>
  632. </div>
  633. </div>
  634. </div>
  635. <div class="closeplay modal fade" id="VTuber03" tabindex="-1" aria-labelledby="exampleModalLabel2"
  636. aria-hidden="true">
  637. <div class="modal-dialog modal-lg">
  638. <div class="modal-content bg-transparent border-0">
  639. <div class="modal-header border-0">
  640. <h5 class="modal-title" id="exampleModalLabel"></h5>
  641. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  642. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  643. </div>
  644. <div class="modal-body">
  645. <style>
  646. .embed-container {
  647. position: relative;
  648. padding-bottom: 56.25%;
  649. height: 0;
  650. overflow: hidden;
  651. max-width: 100%;
  652. }
  653. .embed-container iframe,
  654. .embed-container object,
  655. .embed-container embed {
  656. position: absolute;
  657. top: 0;
  658. left: 0;
  659. width: 100%;
  660. height: 100%;
  661. }
  662. </style>
  663. <div class='embed-container'><iframe src='https://www.youtube.com/embed//6JVBDIM7zac'
  664. frameborder='0' allowfullscreen></iframe></div>
  665. </div>
  666. </div>
  667. </div>
  668. </div> -->
  669. </section>
  670. <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel1"
  671. aria-hidden="true">
  672. <div class="modal-dialog modal-lg">
  673. <div class="modal-content bg-transparent border-0">
  674. <div class="modal-header border-0">
  675. <h5 class="modal-title" id="exampleModalLabel"></h5>
  676. <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
  677. aria-label="Close"><img src="./img/close.svg" alt=""></button>
  678. </div>
  679. <div id="video-modal" class="modal-body">
  680. </div>
  681. </div>
  682. </div>
  683. </div>
  684. </div>
  685. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  686. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  687. crossorigin="anonymous"></script>
  688. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  689. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  690. crossorigin="anonymous"></script>
  691. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  692. <script src="js/lan.js"></script>
  693. <script src="./gotovideo.js"></script>
  694. <script>
  695. $("*").each(function (index, element) {
  696. // 此元素被點選後執行
  697. $(this).click(function (e) {
  698. // 取得被點選元素的屬性:data-gt-target
  699. var target = $(this).attr("data-gt-target");
  700. var duration = $(this).attr("data-gt-duration");
  701. var offset = $(this).attr("data-gt-offset");
  702. // JS 語法:判斷式
  703. // if (條件) {程式區塊}
  704. // 當條件成立,會執行程式區塊
  705. // 如果 目標有資料 才會執行 { } 內的程式
  706. // 避免出現 undefine (未定義 - 不存在的資料)
  707. if (target) {
  708. //console.log("目標:" + target);
  709. //console.log("時間:" + duration);
  710. //console.log("位移:" + offset);
  711. // 上方位置 = 目標區塊.位移().上方位置
  712. var top = $(target).offset().top;
  713. //console.log("要前往元素的上方位置:" + top);
  714. // 網頁元素.停止().動畫({ 上方捲動:指定元素 - 位移},持續時間)
  715. // parseInt() 將文字轉為數字
  716. $("html").stop().animate({
  717. scrollTop: top - offset
  718. }, parseInt(duration));
  719. }
  720. });
  721. });
  722. // 避免動畫與使用者滾輪衝突
  723. // html 在滾動滾輪時 停止 html 所有效果
  724. $("html").on("mousewheel", function () {
  725. $("html").stop();
  726. });
  727. $(".video-img").click(function () {
  728. var videosrc = $(this).data("info");
  729. console.log(videosrc);
  730. let VideoContent = `
  731. <style>
  732. .embed-container {
  733. position: relative;
  734. padding-bottom: 56.25%;
  735. height: 0;
  736. overflow: hidden;
  737. max-width: 100%;
  738. }
  739. .embed-container iframe,
  740. .embed-container object,
  741. .embed-container embed {
  742. position: absolute;
  743. top: 0;
  744. left: 0;
  745. width: 100%;
  746. height: 100%;
  747. }
  748. </style>
  749. <div class='embed-container'><iframe class='youtube-video' src='${videosrc}'
  750. frameborder='0' allowfullscreen></iframe></div>
  751. `;
  752. $('#video-modal').html(VideoContent);
  753. });
  754. // $('.btn-close').click(function () {
  755. // $('.youtube-video').each(function () {
  756. // this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
  757. // });
  758. // });
  759. // $('.closeplay').click(function () {
  760. // $('.youtube-video').each(function () {
  761. // this.contentWindow.postMessage('{"event": "command", "func": "stopVideo", "args": ""}', '*');
  762. // });
  763. // });
  764. </script>
  765. </body>
  766. </html>