Embed
Prefix avatar
VUE YesEmbed 是由原本 Lazy3 的 Flex Media。主要用於可符合 RWD 顯示多媒體訊息，包含圖片、影片等等彈性縮放尺寸。使用類別為 .embed 並且以此為子元件的前綴詞。Embed 長寬比預設為 16:9。
圖片
圖片的做法是由背景圖取代圖片，用一個 <span class="embed_media"></span> 設定背景圖來當作圖片使用，如果要顧及 SEO 可以塞入一個 <img> 完成，但不會顯示。
<div class="embed">
<span class="embed_media" style="background-image: url('{path}');"></span>
<img src="{path}" alt="">
</div>
<k-embed src="{path}" alt="{圖片描述}"></k-embed>
影片以及多媒體
影片可使用 <video>、<iframe>、<embed>或是<object>，並且不需要加上類別名稱。
Video
<div class="embed">
<video controls muted loop poster="{Poster Path}">
<source src="{Video Path}" type="video/mp4">
</video>
</div>
<k-embed type="video" src="{Video Path}" poster="{Poster Path}"></k-embed>
Iframe & Youtube
<div class="embed">
<iframe src="{Youtube Path}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<k-embed type="iframe" src="{Youtube Path}" allow="{parameters}"></k-embed>
Iframe & Google Map
<div class="embed">
<iframe src="{Google Path}" allowfullscreen></iframe>
</div>
<k-embed type="iframe" src="{Google Path}"></k-embed>
Embed & Youtube
<div class="embed">
<embed src="{Youtube Path}"></embed>
</div>
<k-embed type="embed" src="{Media Path}"></k-embed>
Object & Youtube
<div class="embed">
<object data="{Youtube Path}"></object>
</div>
<k-embed type="object" src="{Media Path}"></k-embed>
顯示比例
除了預設的 16:9 之外，另外提供以下 14 種比例。更換顯示比例可參照 Utilities 的 Radio 類別。
<div class="embed u-ratio:1by1"></div>
<k-embed src="{Path}" ratio="1by1"></k-embed>
陰影效果 Shadow
ver 4.1
在 .embed 加上 .:shadow。
<div class="embed :shadow"></div>
<k-embed src="{Path}" stl="shadow"></k-embed>
Vue
組件名稱為 <k-embed>。使用方式只要選定媒體類別與路徑就可以完成。
Embed Attributes
| 屬性名 | 資料類型 | 值 | 預設 | 範例 | 說明 |
|---|---|---|---|---|---|
| src | String | 無 | null | src="/img/hello.png" | 媒體路徑 |
| type | String | img, video, object, embed, iframe | img | type="iframe" | 選擇媒體顯示類型 |
| mime | String | MIME 類別 | video/mp4 | mime="video/webm" | 可設定媒體 MIME 類型，以便瀏覽器可正常播放 |
| stl | String | shadow | null | stl="shadow" | 變更樣式 |
| ratio | String | 參照 Utilities Ratio | null | ratio="16by10" | 變更顯示比例 |
| href | String | 無 | null | href="/product" | 可指定頁面或網址連結。 |
| target | String | _self, _parent, _top, _blank | _self | target="_blank" | 設定連結開啟方式，搭配 href 使用 |
| to | String | Object | 無 | null | to="/" | 使用 Vue router 指定路徑，若同時設定 href 則以 href 優先。 |
| replace | Boolean | true, false | false | :replace="true" | 設定是否記錄於 router 的 history，若為 true 則不紀錄。 |