Dream Talker

指定區域自動縮放

在上一篇 Youtube 視頻自適應設計 的文章中可能會遇到以下一種情形，內文版面較寬大使得影片尺寸跟著放大。在視覺上行動裝置的影片尺寸看來舒適；但網頁版的影片尺寸可能有壓倒內文的感覺。為了控制視覺設計的需要，可以透過 CSS 樣式來限定 iframe-16x9 或 iframe-4x3 的寬度最大值，即是在樣式中加入 max-width: 500px; 去限制影片伸展的最大值。500px 可自訂。

如此簡單就解決了縮放尺寸的問題，那麼還有這篇教學示範的必要嗎？因為我想推薦另一種方式，即是加上背景區域限定影片尺寸的方式。透過另外的區塊樣式將影片限制尺寸，看起來像是加上顏色外框，又或許您希望做更有趣的背景設計：例如變色框、滑鼠移上時背景浮出提示等效果，當然請自行搜尋樣式設計，此處僅示範基本樣式。

除了上一篇的樣式外，現在另外加上一筆樣式：

.bg-embed {
width:100%; height: auto;
max-width: 550px;
background-color: #b0e0e6;
border-radius: 3px;
padding: 10px;
margin-left: auto; margin-right: auto;}

bg-embed 意指 background-embed ，隨你命名樣式。
max-width: 550px; 尺寸修改成適合版面的尺寸。
background-color: 背景色碼。
border-radius: 邊框圓角尺寸。
padding: 邊框距離影片的尺寸。
margin-left: auto; margin-right: auto; 不需要置中就移除此段。

編輯文章時切換成 HTML 編輯，將 <div class="bg-embed"> </div> 包夾影片碼，如下：

<div class="bg-embed">
<div class="iframe-16x9">
<iframe allowfullscreen width="560" height="315" frameborder="0" src="//www.youtube.com/embed/1234567"></iframe>
</div>
</div>

影片自動縮放 + 背景框示範：

---

進階運用

由於它是一個 DIV 樣式區塊，表示它不僅可以包夾 Youtube 影片，也能夠包夾圖片、文案。
示範如下：