直接使用YouTube產生的嵌入碼，使用行動裝置瀏覽網頁會有爆版的情況，
為了讓YouTube影片在電腦與手機都能讓完整呈顯，需要對這段原始碼做些微調整！
使用YouTube的嵌入碼，如下：
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/XbEJlBYiCHM” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
↑這段嵌入碼是尚未修改過的
直接貼進網頁並用手機瀏覽時會如下圖呈現：
難到不能讓影片也隨著螢幕同比例RWD嗎？
「可以的！」只要對YouTube產生的嵌入碼，稍作修改就沒問題囉！
【步驟一：將以下原始碼完整的複製下來】
<div class=”ytb_video_box”>
<div class=”ytb_video_container”>
<!–嵌入碼貼在這下面–>
<!–嵌入碼貼在這上面–>
</div>
</div>
<style>
.ytb_video_box{ max-width:1180px; padding:5px; margin:0 auto; background:#FFF; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:10px;}
.ytb_video_container { max-width:1180px; margin:0 auto; position:relative; height:658px; overflow:hidden;}
.ytb_video_container iframe,.ytb_video_container object,.ytb_video_container embed { position:absolute; top:0; left:0; width:100%; height:100%; max-height:658px;}
@media screen and (max-width:1280px) {
.ytb_video_container{ padding-bottom:56%; height:0;}
}
</style>
【步驟二：把YouTube產生的嵌入碼，一起貼進來】
<div class=”ytb_video_box”>
<div class=”ytb_video_container”>
<!–嵌入碼貼在這下面–>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/XbEJlBYiCHM” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
<!–嵌入碼貼在這上面–>
</div>
</div>
<style>
.ytb_video_box{ max-width:1180px; padding:5px; margin:0 auto; background:#FFF; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:10px;}
.ytb_video_container { max-width:1180px; margin:0 auto; position:relative; height:658px; overflow:hidden;}
.ytb_video_container iframe,.ytb_video_container object,.ytb_video_container embed { position:absolute; top:0; left:0; width:100%; height:100%; max-height:658px;}
@media screen and (max-width:1280px) {
.ytb_video_container{ padding-bottom:56%; height:0;}
}
</style>
使用修改後的原始碼，影片就能如下圖一樣完整呈現囉！
【進階調整】
如何修改影片的最大寬度？
找到以下這一段↓
.ytb_video_box{ max-width:1180px; padding:5px; margin:0 auto; background:#FFF; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:10px;}
黃色標記的地方可以隨適合的寬度自行調整喔！
４．消費者
６．消費者
２．假設甜點店老闆
３．
４．接著甜點店老闆要來挑選設定禮盒內的內容物～ 
５．進入設定任選區後，於必選 任選區點擊「新增任選區」進入設定！
６．甜點店老闆首先要將甜甜圈組成一個任選區 
７．設定完任選區的規則後，
８．甜點店
９．甜點店
１０．若甜點店
１１．甜點店
１２．甜點店
１３．若商品任選組合內，有不強制、可讓消費者依自身需求是否需選購的商品區 至「選填」的任選區這邊新增 
１５．設定完任選區的規則後，
１６．甜點店
１７．甜點店
１８．完成加入商品
１９．甜點店
２０．
2.按下「產生存取權杖」後，請複製「存取權杖」 
3.進到網站後台，【網站維護】>【網站擴充元件】>找到「 Facebook 像素 」 
4.將方才複製的「存取權杖」貼至對應的「存取權杖」欄位即完成設定 
