Swiftlets
DocumentationShowcaseAbout

Media Elements

Images, videos, audio, and embedded content with modern styling

← Back to Showcase

Images

The Img element embeds images with support for alt text, lazy loading, and responsive sizing.

Swift Code

// Basic image
Img(src: "logo.png", alt: "Company Logo")

// Styled image  
Img(src: "hero.jpg", alt: "Hero Image")
    .class("img-rounded img-shadow")
    .style("width", "100%")
    .style("max-width", "600px")

// Image with loading optimization
Img(src: "product.jpg", alt: "Product")
    .attribute("loading", "lazy")
    .attribute("width", "300")
    .attribute("height", "200")

Generated HTML

<!-- Basic image -->
<img src="logo.png" alt="Company Logo">

<!-- Styled image -->
<img src="hero.jpg" alt="Hero Image" class="img-rounded img-shadow" style="width: 100%; max-width: 600px;">

<!-- Image with loading optimization -->
<img src="product.jpg" alt="Product" loading="lazy" width="300" height="200">

Preview

Basic image:

Swiftlets Logo

Styled image with gradient background:

Hero Image

Thumbnail with attributes:

Product

Picture Element - Responsive Images

Picture element provides art direction and format selection for responsive images.

Swift Code

Picture {
    Source(srcset: "hero-mobile.webp", media: "(max-width: 768px)", type: "image/webp")
    Source(srcset: "hero-desktop.webp", media: "(min-width: 769px)", type: "image/webp")
    Source(srcset: "hero-mobile.jpg", media: "(max-width: 768px)", type: "image/jpeg")
    Source(srcset: "hero-desktop.jpg", media: "(min-width: 769px)", type: "image/jpeg")
    Img(src: "hero-fallback.jpg", alt: "Hero Image")
}

Generated HTML

<picture>
    <source srcset="hero-mobile.webp" media="(max-width: 768px)" type="image/webp">
    <source srcset="hero-desktop.webp" media="(min-width: 769px)" type="image/webp">
    <source srcset="hero-mobile.jpg" media="(max-width: 768px)" type="image/jpeg">
    <source srcset="hero-desktop.jpg" media="(min-width: 769px)" type="image/jpeg">
    <img src="hero-fallback.jpg" alt="Hero Image">
</picture>

Preview

Resize your browser to see different images:

Responsive Image

Video Element

Video element embeds video content with playback controls and multiple source support.

Swift Code

Video(src: "movie.mp4", controls: true) {
    P("Your browser does not support the video tag.")
}
.attribute("width", "320")
.attribute("height", "240")

// With multiple sources and poster
Video(controls: true, autoplay: false, loop: false, muted: true) {
    Source(type: "video/mp4", src: "movie.mp4")
    Source(type: "video/ogg", src: "movie.ogg")
    P("Your browser does not support the video tag.")
}
.attribute("poster", "poster.jpg")

Generated HTML

<video src="movie.mp4" controls width="320" height="240">
    <p>Your browser does not support the video tag.</p>
</video>

<!-- With multiple sources and poster -->
<video controls poster="poster.jpg">
    <source type="video/mp4" src="movie.mp4">
    <source type="video/ogg" src="movie.ogg">
    <p>Your browser does not support the video tag.</p>
</video>

Preview

Sample video with controls:

💡 Video features: play/pause, volume control, fullscreen

Audio Element

Audio element embeds sound content with playback controls.

Swift Code

Audio(src: "audio.mp3", controls: true) {
    P("Your browser does not support the audio element.")
}

// With multiple sources
Audio(controls: true) {
    Source(type: "audio/ogg", src: "audio.ogg")
    Source(type: "audio/mpeg", src: "audio.mp3")
    P("Your browser does not support the audio element.")
}
.class("audio-player")

Generated HTML

<audio src="audio.mp3" controls>
    <p>Your browser does not support the audio element.</p>
</audio>

<!-- With multiple sources -->
<audio controls class="audio-player">
    <source type="audio/ogg" src="audio.ogg">
    <source type="audio/mpeg" src="audio.mp3">
    <p>Your browser does not support the audio element.</p>
</audio>

Preview

Audio player with controls:

🎵 Features: play/pause, seek bar, volume control

IFrame Element - Embedded Content

IFrame element embeds external content within your page.

Swift Code

// Basic iframe
IFrame(src: "https://example.com", title: "Example Website")
    .style("width", "100%")
    .style("height", "400px")

// YouTube embed
IFrame(
    src: "https://www.youtube.com/embed/dQw4w9WgXcQ",
    title: "YouTube video player"
)
    .attribute("frameborder", "0")
    .attribute("allowfullscreen", "true")

Generated HTML

<!-- Basic iframe -->
<iframe src="https://example.com" title="Example Website" style="width: 100%; height: 400px;"></iframe>

<!-- YouTube embed -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

Preview

Embedded OpenStreetMap:

🌐 IFrames can embed maps, videos, documents, and other web content

FormsLayout Components