Embed

Embed 是由原本 Lazy3 的 Flex Media。主要用於可符合 RWD 顯示多媒體訊息,包含圖片、影片等等彈性縮放尺寸。使用類別為 .embed 並且以此為子元件的前綴詞。Embed 長寬比預設為 16:9。


圖片

圖片的做法是由背景圖取代圖片,用一個 <span class="embed_media"></span> 設定背景圖來當作圖片使用,如果要顧及 SEO 可以塞入一個 <img> 完成,但不會顯示。

Lazy4 Demo 圖:米漿
<div class="embed"> <span class="embed_media" style="background-image: url(image path)"></button> <img src="image path" alt="for seo"> </div>

影片以及多媒體

影片可使用 <video><iframe><embed>或是<object>,並且不需要加上類別名稱。

Video

Iframe & Youtube

Iframe & Google Map

Embed & Youtube

Object & Youtube
<div class="embed"> <video poster="image path"> <source src="video path"></source> </video> </div> <div class="embed"> <iframe src="path"></iframe> </div> <div class="embed"> <embed src="path"></embed> </div> <div class="embed"> <object data="path"></object> </div>

顯示比例

除了預設的 16:9 之外,另外提供以下 14 種比例。更換顯示比例可參照 Utilities 的 Radio 類別。