指定區域自動縮放

10   Comments

youtube responsive
在上一篇 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 影片,也能夠包夾圖片、文案。
示範如下:

youtube responsive
內文顯示於此區域內:

.bg-embed 的樣式內可以再附加文字相關的設定,例如字型、尺寸、顏色、底線等樣式,即可當成特殊意義的內文區域。Ex: 提示


Author Summary
指定區域自動縮放
Subject : 指定區域自動縮放
Author : - Dream Talker Updated at: 11:27 AM
Votes : 100% - 5.0 - based on 2015
自適應影片放大時,內文版面較寬大使得影片尺寸跟著放大。在視覺上行動裝置的影片尺寸看來舒適;但網頁版的影片尺寸可能有壓倒內文的感覺。為了控制視覺設計的需要,可以透過 CSS 樣式來限定寬度最大值。
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. Anonymous5:02 AM

    謝謝您,正是我需要的。已經改好了!
    潔琳

    ReplyDelete
  2. 請問這一段新增的沒辦法一起寫進div class="iframe-16x9"裡嗎?因為我之前很多影片已經都用div class="iframe-16x9"包夾了,如果再新增新的div,那要一篇篇翻開再重新夾進去是吧?還是有其他方法?

    ReplyDelete
    Replies
    1. 您可以將 max-width:500px; 加進 .iframe-16x9 的樣式裡面,不過沒底框就是。

      div 是一種容器,底框那一段樣式是容器的包裝紙,只能再包夾在外層,寫進 iframe-16x9 會彼此干擾空間的定義,只好新的文章再使用吧!

      用 javascript 去重新定義文件的組成應該可以,但是我不推薦重新定義的方式,就像妳形容的:會髒﹍誰知道過個三年五年網頁的構成會不會出現大革新?那些被動過手腳的部份又要再改一次,所以不推薦。

      Delete
    2. 沒關係,那我還是用 iframe-16x9這組就好,原本是想說可以寫在一起的話就用,不行的話,照舊是不會太突兀啦!

      Delete
    3. 為我平常用手機看妳的網站,一直覺得很正常。剛才用電腦去看「四國高知 夏夜祭」的影片才想到妳不是自適應的版型,影片和照片的比例的確有點「不合群」。我幫妳重新計算編寫樣式,看看合不合用?我沒有其他範本做實測,您再自行調整一下數據。

      .iframe-16x9 {position:relative;padding-bottom:36%;padding-top:35px;overflow:hidden;margin-left:auto;margin-right:auto;width: 100%;height:auto;max-width:610px;}

      .iframe-4x3 {position:relative;padding-bottom:45%;padding-top:35px;overflow:hidden;margin-left:auto;margin-right:auto;width:100%;height:auto;max-width:610px;}

      Delete
    4. 忘了說:第二部份 iframe 的樣式照舊。

      Delete
    5. ok,我改好了。

      但四國高知的照片是搬家前在痞客邦的尺寸600px,後來有調640px,剛搬來blogger改為700px,現在都是720px,所以我把寬度調成720px,以新文章為主。

      謝謝你喔!

      Delete
    6. 如果要看最新尺寸帶有影片的應該就是固立果那篇

      Delete
    7. 如果是固定 720px 那麼 16x9 的比例最好改成 43~45% 之間,否則有部份畫面會被切掉。
      4x3 的影片我不知道哪一篇有,您需要調整 45% 的部份(加大),不然會變形。

      Delete
    8. 其實我每一支影片應該都是4*3或3*2,只是我都套錯了,剛剛剛好順便改@@

      Delete