WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-12. 影片介紹: 影片清單的播放

雷同index.html，先設計左側3/4、右側1/4的二欄排版。

左側區域內安排YouTube影片

<iframe name="movieFrame" width="700" height="450" 
        src="https://www.youtube.com/embed/hOskFsCGLgA" frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe>

右側區域內安排HTML

<aside class="w3-quarter w3-padding-large w3-padding-24 w3-black">
  <a href="YouTube影片src" target="movieFrame"><img src="images/movie/movie01.jpg" alt=""></a>
  <a href="YouTube影片src" target="movieFrame"><img src="images/movie/movie02.jpg" alt=""></a>
  <a href="YouTube影片src" target="movieFrame"><img src="images/movie/movie03.jpg" alt="" class="current"></a>
  <a href="YouTube影片src" target="movieFrame"><img src="images/movie/movie04.jpg" alt=""></a>
  <a href="YouTube影片src" target="movieFrame"><img src="images/movie/movie05.jpg" alt=""></a>
  <a href="YouTube影片src" target="movieFrame"><img src="images/movie/movie06.jpg" alt=""></a>
</aside>

調整 CSS 樣式，加強點選時樣式的變化。

 

 

go TOP