'%3e%3crect%20width='100'%20height='100'%20rx='32'%20fill='white'/%3e%3crect%20x='38'%20y='-19'%20width='100'%20height='152'%20rx='32'%20fill='url(%23paint0_linear_232_25)'/%3e%3crect%20x='-46'%20y='-40'%20width='100'%20height='100'%20rx='32'%20fill='url(%23paint1_linear_232_25)'/%3e%3crect%20x='-21'%20y='53'%20width='100'%20height='100'%20rx='32'%20fill='url(%23paint2_linear_232_25)'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_232_25'%20x1='68.5'%20y1='1.5'%20x2='132.327'%20y2='74.2422'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FFDBDC'/%3e%3cstop%20offset='1'%20stop-color='%23FF24F0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_232_25'%20x1='32.5'%20y1='31.5'%20x2='-18.5'%20y2='-17.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23BCFDFF'/%3e%3cstop%20offset='1'%20stop-color='%2338FF50'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_232_25'%20x1='55.5'%20y1='50'%20x2='23'%20y2='97.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%239ED0FF'/%3e%3cstop%20offset='1'%20stop-color='%230084FF'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_232_25'%3e%3crect%20width='100'%20height='100'%20rx='32'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Media Players
Embed external and native video streams and customize image rendering options in documentation.
1. Video Player
Linx Books supports embedding YouTube, Vimeo, and custom native HTML5 videos (.mp4, .webm, etc.) with customizable properties and custom layout aspect ratios.
YouTube Embed Example
To embed a YouTube video, provide either the YouTube video ID or URL:
Vimeo Embed Example
To embed a Vimeo video, provide either the Vimeo ID or URL:
Native Video Example
To embed a native HTML5 video, provide the direct video file URL:
2. Custom Image Component
Linx Books provides a premium, responsive image component (ui:image) that supports local/remote image and GIF URLs, includes a skeleton loading animation, offers an elegant broken-link fallback card, and supports layout-specific titles.
Size Configurations
The size prop controls the rendering layout:
size: full: Renders a full-width image with title as a glassmorphic badge overlaying the bottom-right corner.- Whitelist Ratios &
auto(video,square,portrait,cinema,4:3,auto): Centers the image container on the page, keeps its width within bounds without stretching it (w-fit), and renders the title as a caption underneath the image.
Full-Width Layout with Badge Overlay (size: full)
Centered Layout with Whitelist Ratio (size: square)
Setting the size to a whitelisted ratio centered layout (e.g. square):
Centered Layout with Auto Aspect Ratio (size: auto)
Setting the size to auto centers the image on the page while maintaining its natural proportions:
Failure Fallback UI
If an image fails to load or has an invalid URL, a premium error card is displayed gracefully:
