Embed
Why use
[chap-embed] over default WordPress [embed]?Responsive aspect ratio
[chap-embed] shortcode uses an instrinsic aspect ratio which allows it to resize responsively based on their expected aspect ratio and not by using a single specified width or height.
Only load after interaction
Including an iframe embed directly will automatically load all iframe contents on page load which can drastically reduce the responsiveness of a page.
Semantic UI's embed implementation combats this by not loading iframe content until a user has interacted with your embed's placeholder content.
To give you an idea of how much file size including an embed will add to your page load see the chart below:
The following are download estimates taken from firebug and a single sample embed. Individual results may vary.
| Network | Embed size |
|---|---|
| Google Maps | 237kb |
| YouTube | 380kb |
| Vimeo | 81kb |
Embed shortcode arguments
source | Source to use, if no source is provided it will be determined from the domain of a specified URL (youtube|vimeo). | ||
url | URL to use for embed. | ||
image | Link to placeholder image. | ||
icon | Icon to use with placeholder. | ||
| Classes |
| ||
amp | (Optional) Alternative URL used on AMP pages, use an URL suitable for the WordPress [embed] shortcode. | ||
amp-iframe | Set to "true" to force iFrame usage on AMP pages. | ||
amp-height | AMP iFrame height (default: 400). |
Embed YouTube using an ID
<chap-embed source="youtube" id="XSGBVzeBUbk">Embed Vimeo using an ID
<chap-embed source="vimeo" id="1084537">Embed YouTube using a link, 4:3 aspect ratio
<chap-embed 4:3 source="youtube" id="XSGBVzeBUbk">Embed placeholder image and icon
<grid equal width stackable>
<column>
<chap-embed source="youtube" id="XSGBVzeBUbk" image="https://i.imgur.com/5yGDVBI.png">
</column>
<column>
<chap-embed source="youtube" id="XSGBVzeBUbk" image="https://i.imgur.com/5yGDVBI.png" icon="video">
</column>
</grid>Google Maps demo
<chap-embed image="https://i.imgur.com/yVzwFHB.png" icon="marker" amp-height="600" url="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12418.656683985166!2d-123.70117385610186!3d38.908792273100936!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8093b7192ca69f27%3A0xcdc7d22a4a426ea0!2sCA-1%2C+Point+Arena%2C+CA+95468!5e0!3m2!1sen!2sus!4v1485179477978">Notes
Google Maps will be automatically converted to iFrame on AMP pages.Custom content
<chap-embed url="https://myfav.es/jack" icon="right circle arrow" image="//placehold.co/810x455" amp-iframe="true">Notes
An embed can display any web content. If WordPress [embed] shortcode is unable to embed that URL an iFrame can be forced on AMP pages by setting the amp-iframe argument to true.