使用內嵌Youtuber播放介面
1.在Youtube上找到我們要的影片並且直接對著畫面按下右鍵，就會跑出選單
2.點選「複製嵌入程式碼」
3.直接將整段程式碼貼在<body></body>中，
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/HKQ3qwPnhT0"
title="追尋京都以前的日本文化 從奈良到飛鳥的歷史之旅" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
我們就可以看到影片的資訊被包覆iframe標籤之中。
接著我們將width及height設定成我們要的數值即可，這邊一般建議100%是因為我們可以讓影片跟隨變動。
Collapse特效
在Bootstrap特效中，有個我們常用的特效叫做Collapse，我們可以在Components中找到它或點選這裡，我們看範例可以知道，這是一個可以讓文字折疊的特效。
HTML:
<button data-toggle="collapse" data-target="#article1" class="btn btn-primary ">Our Team</button>
<article class="my-3 collapse" id="article1">
<h3>Our Team</h3>
<p>
⋮
</p>
</article>
我們在 button標籤內新增這部分
data-toggle="collapse" data-target="#article1"
data-toggle及data-target都不HTML原本的屬性，而是因為我們引用了Bootstrap才有的特殊屬性，其中data-target要對到我們要折疊的文章(注意要使用#)，這裡我們對應id為article1的文章
iThome鐵人賽
看影片追技術