Import existing project
This commit is contained in:
parent
7887817595
commit
80b0cc4939
125 changed files with 16980 additions and 0 deletions
664
develop/html/lazy-video.html
Normal file
664
develop/html/lazy-video.html
Normal file
|
|
@ -0,0 +1,664 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset=UTF-8>
|
||||
<meta http-equiv=X-UA-Compatible content="IE=edge">
|
||||
<meta name=viewport content="width=device-width,initial-scale=1">
|
||||
<title>Lazy Video Component - Multi-Platform Video Embedding</title>
|
||||
<meta name=description content="A lightweight, customizable web component for optimized video embeds from YouTube, Bitchute and more platforms with lazy loading for performance.">
|
||||
<link rel=icon href=/images/favi.png type=image/png>
|
||||
<link rel=apple-touch-icon href=/images/favi.png>
|
||||
<link rel="shortcut icon" href=/images/favi.png>
|
||||
<link rel=preload href=/webfonts/Poppins-Regular.woff2 as=font type=font/woff2 crossorigin>
|
||||
<link rel=preload href=/webfonts/Poppins-SemiBold.woff2 as=font type=font/woff2 crossorigin>
|
||||
<link rel="preload" href="/js/u.js" as="script">
|
||||
<link rel="preload" href="/js/lv.js" as="script">
|
||||
<link rel="stylesheet" href="/css/u.css">
|
||||
<link rel="stylesheet" href="/css/docs.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@speed-highlight/core@1.2.7/dist/themes/github-dark.css">
|
||||
<script async src=/js/u.js></script>
|
||||
<script async src="/js/lv.js"></script>
|
||||
<script type="module" src="/js/docs.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>Lazy Video Docs</h1>
|
||||
|
||||
<div class="toc">
|
||||
<h2>Contents</h2>
|
||||
<ul>
|
||||
<li><a href="#overview">Overview</a></li>
|
||||
<li><a href="#basic-usage">Basic Usage</a></li>
|
||||
<li><a href="#platforms">Supported Platforms</a></li>
|
||||
<li><a href="#attributes">Attributes</a></li>
|
||||
<li><a href="#styling">Styling & CSS Variables</a></li>
|
||||
<li><a href="#examples">Examples</a></li>
|
||||
<li><a href="#converting">Converting Existing iframes</a></li>
|
||||
<li><a href="#security">Security & Privacy</a></li>
|
||||
<li><a href="#browser-support">Browser Support</a></li>
|
||||
<li><a href="#breaking-change">Breaking Change</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<section id="overview" class="section">
|
||||
<h2>Overview</h2>
|
||||
<p>
|
||||
Embedding videos with standard <code><iframe></code> tags can dramatically slow down your site and consume large amounts of data. Each iframe loads the full video player and related resources immediately-even if the user never interacts with it. On pages with several videos, this can add <strong>hundreds of megabytes</strong> to the initial page load, resulting in a sluggish and costly experience, especially for users on mobile devices or limited networks.
|
||||
</p>
|
||||
<h3>How Lazy Video Helps</h3>
|
||||
<p>
|
||||
The <code><lazy-video></code> component solves this by loading only a lightweight thumbnail and play button at first. The actual video player is loaded only when the user clicks play (or when the video scrolls into view if <code>autoload</code> is enabled). This keeps your pages fast, responsive, and bandwidth-friendly.
|
||||
</p>
|
||||
<div class="lv-btn-group">
|
||||
<a href="/js/lv.js" target="_blank" rel="noopener" class="lv-btn lv-btn-primary">View Source</a>
|
||||
<a href="/js/lv.js" download class="lv-btn lv-btn-outline">Download</a>
|
||||
<span class="lv-size-info">~17.0kB / <span>6.0kB</span> (Gzip)</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="basic-usage" class="section">
|
||||
<h2>Basic Usage</h2>
|
||||
<p>
|
||||
To get started, include the script on your page and use the custom element as shown below:
|
||||
</p>
|
||||
<div class="code-example">
|
||||
<span class="code-label">HTML</span>
|
||||
<pre><code><lazy-video
|
||||
src="https://www.youtube.com/embed/wPr3kws2prM"
|
||||
title="Till We Have Faces by Silent Planet">
|
||||
</lazy-video></code></pre>
|
||||
</div>
|
||||
<div class="note">
|
||||
<p>
|
||||
Always add a <code>title</code> for accessibility and better alt text on thumbnails.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="platforms" class="section">
|
||||
<h2>Officially Supported Platforms</h2>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Platform</th>
|
||||
<th>URL Pattern</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>YouTube</td>
|
||||
<td>
|
||||
<ul class="url-patterns">
|
||||
<li><code>youtube.com/embed/ID</code></li>
|
||||
<li><code>youtube.com/watch?v=ID</code></li>
|
||||
<li><code>youtu.be/ID</code></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>Full support for thumbnails and parameters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bitchute</td>
|
||||
<td>
|
||||
<ul class="url-patterns">
|
||||
<li><code>bitchute.com/video/ID/</code></li>
|
||||
<li><code>bitchute.com/embed/ID/</code></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>Custom thumbnails are only needed if autoload is disabled.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="attributes" class="section">
|
||||
<h2>Attributes</h2>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Attribute</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>src</td>
|
||||
<td>Video embed URL (required)</td>
|
||||
<td>N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>Video title</td>
|
||||
<td>"Video"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>width</td>
|
||||
<td>Width in pixels or percent</td>
|
||||
<td>100% (responsive)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>height</td>
|
||||
<td>Height in pixels</td>
|
||||
<td>16:9 ratio</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>thumbnail</td>
|
||||
<td>Custom thumbnail URL</td>
|
||||
<td>Auto-detected per platform</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>thumbnail-quality</td>
|
||||
<td>YouTube thumbnail quality (default, hq, mq, sd, maxres)</td>
|
||||
<td>Auto (maxres on desktop, hq on mobile)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>service</td>
|
||||
<td>Force a specific service (youtube, bitchute)</td>
|
||||
<td>Auto-detected</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sandbox</td>
|
||||
<td>Extra security for the iframe. Restricts what the embedded player can do. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox" target="_blank">MDN</a> for details.</td>
|
||||
<td>allow-scripts allow-same-origin allow-popups allow-forms allow-presentation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>no-cookie</td>
|
||||
<td>Use youtube-nocookie.com for YouTube (privacy-friendly)</td>
|
||||
<td>true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoload</td>
|
||||
<td>Load video when scrolled into view</td>
|
||||
<td>false (YouTube), true (Bitchute)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide-title</td>
|
||||
<td>Hide the video title bar</td>
|
||||
<td>false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>align</td>
|
||||
<td>Set alignment (left, right, center)</td>
|
||||
<td>center</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container-fit</td>
|
||||
<td>Make video fill the container (FitVids style)</td>
|
||||
<td>false</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="warning">
|
||||
<p>
|
||||
<strong>Warning:</strong> Using <code>autoload</code> with many videos on one page can impact performance as users scroll. Use with care!
|
||||
</p>
|
||||
</div>
|
||||
<div class="note">
|
||||
<p>
|
||||
<strong>Note:</strong> With <code>container-fit</code>, the component overrides max-width to 100% and sets max-height to auto, making it fill its container while keeping the aspect ratio.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="styling" class="section">
|
||||
<h2>Styling & CSS Variables</h2>
|
||||
<p>
|
||||
You can customize the look of <code><lazy-video></code> using CSS variables:
|
||||
</p>
|
||||
<div class="code-example">
|
||||
<span class="code-label">CSS</span>
|
||||
<pre><code>lazy-video {
|
||||
--lv-max-width: 600px;
|
||||
--lv-border-radius: 8px;
|
||||
--lv-play-button-color: #f00;
|
||||
--lv-play-button-bg: rgba(0, 0, 0, 0.7);
|
||||
--lv-show-title: none;
|
||||
}</code></pre>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<h3>Available CSS Variables</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>CSS Variable</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-max-width</td>
|
||||
<td>Maximum width of the video</td>
|
||||
<td>560px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-aspect-ratio</td>
|
||||
<td>Aspect ratio</td>
|
||||
<td>16 / 9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-display</td>
|
||||
<td>Display type</td>
|
||||
<td>block</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-position</td>
|
||||
<td>CSS position</td>
|
||||
<td>relative</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-border-radius</td>
|
||||
<td>Border radius for the container</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-margin</td>
|
||||
<td>Container margin</td>
|
||||
<td>0 auto</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-margin-left</td>
|
||||
<td>Margin for left alignment</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-margin-right</td>
|
||||
<td>Margin for right alignment</td>
|
||||
<td>0 0 0 auto</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-margin-center</td>
|
||||
<td>Margin for center alignment</td>
|
||||
<td>0 auto</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-align</td>
|
||||
<td>Set alignment (left, right, center)</td>
|
||||
<td>center</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-background</td>
|
||||
<td>Background color</td>
|
||||
<td>#000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-thumbnail-opacity</td>
|
||||
<td>Thumbnail opacity</td>
|
||||
<td>0.85</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-thumbnail-hover-opacity</td>
|
||||
<td>Opacity on hover</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-thumbnail-object-fit</td>
|
||||
<td>Object-fit for thumbnail</td>
|
||||
<td>cover</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-play-button-width</td>
|
||||
<td>Play button width</td>
|
||||
<td>68px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-play-button-height</td>
|
||||
<td>Play button height</td>
|
||||
<td>48px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-play-button-bg</td>
|
||||
<td>Play button background</td>
|
||||
<td>rgba(33, 33, 33, 0.8)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-play-button-bg-hover</td>
|
||||
<td>Play button hover background</td>
|
||||
<td>rgba(230, 33, 23, 1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-play-button-color</td>
|
||||
<td>Play button arrow color</td>
|
||||
<td>rgba(255, 255, 255, 0.9)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-play-button-radius</td>
|
||||
<td>Play button border radius</td>
|
||||
<td>8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-play-button-arrow-size</td>
|
||||
<td>Play button arrow size</td>
|
||||
<td>12px 0 12px 20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-title-padding</td>
|
||||
<td>Title bar padding</td>
|
||||
<td>10px 12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-title-bg</td>
|
||||
<td>Title background</td>
|
||||
<td>rgba(0, 0, 0, 0.75)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-title-color</td>
|
||||
<td>Title text color</td>
|
||||
<td>white</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-title-font-family</td>
|
||||
<td>Title font family</td>
|
||||
<td>Roboto, Arial, sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-title-font-size</td>
|
||||
<td>Title font size</td>
|
||||
<td>18px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-title-font-weight</td>
|
||||
<td>Title font weight</td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-title-line-height</td>
|
||||
<td>Title line height</td>
|
||||
<td>1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-focus-outline</td>
|
||||
<td>Focus outline</td>
|
||||
<td>2px solid #4285F4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-focus-outline-offset</td>
|
||||
<td>Focus outline offset</td>
|
||||
<td>2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-show-title</td>
|
||||
<td>Show/hide title bar (use 'none' to hide)</td>
|
||||
<td>block</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-timestamp-right</td>
|
||||
<td>Timestamp right position</td>
|
||||
<td>10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-timestamp-bottom</td>
|
||||
<td>Timestamp bottom position</td>
|
||||
<td>10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-timestamp-bg</td>
|
||||
<td>Timestamp background</td>
|
||||
<td>rgba(0, 0, 0, 0.7)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-timestamp-color</td>
|
||||
<td>Timestamp text color</td>
|
||||
<td>white</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-timestamp-padding</td>
|
||||
<td>Timestamp padding</td>
|
||||
<td>2px 6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-timestamp-radius</td>
|
||||
<td>Timestamp border radius</td>
|
||||
<td>3px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-timestamp-font-size</td>
|
||||
<td>Timestamp font size</td>
|
||||
<td>12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-timestamp-font-family</td>
|
||||
<td>Timestamp font family</td>
|
||||
<td>system-ui, sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-loading-bg</td>
|
||||
<td>Loading background</td>
|
||||
<td>rgba(0,0,0,0.7)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-loading-color</td>
|
||||
<td>Loading text color</td>
|
||||
<td>white</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-loading-font-family</td>
|
||||
<td>Loading font family</td>
|
||||
<td>system-ui, sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-fallback-bg</td>
|
||||
<td>Fallback background</td>
|
||||
<td>#1a1a1a</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-fallback-color</td>
|
||||
<td>Fallback text color</td>
|
||||
<td>white</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-fallback-font-family</td>
|
||||
<td>Fallback font family</td>
|
||||
<td>system-ui, sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--lv-fallback-font-size</td>
|
||||
<td>Fallback font size</td>
|
||||
<td>14px</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="examples" class="section">
|
||||
<h2>Examples</h2>
|
||||
<h3>YouTube Embed with Custom Size</h3>
|
||||
<div class="code-example">
|
||||
<span class="code-label">HTML</span>
|
||||
<pre><code><lazy-video
|
||||
src="https://www.youtube.com/embed/wPr3kws2prM"
|
||||
title="Till We Have Faces by Silent Planet"
|
||||
width="50%"
|
||||
height="260px"
|
||||
thumbnail-quality="maxres">
|
||||
</lazy-video></code></pre>
|
||||
</div>
|
||||
<div class="example">
|
||||
<lazy-video src="https://www.youtube.com/embed/wPr3kws2prM" title="Till We Have Faces by Silent Planet" width="50%" height="260px"></lazy-video>
|
||||
</div>
|
||||
<h3>Bitchute with Autoload Off</h3>
|
||||
<div class="code-example">
|
||||
<span class="code-label">HTML</span>
|
||||
<pre><code><lazy-video
|
||||
src="https://www.bitchute.com/video/zSfeNPF-OpY"
|
||||
title="Trump Assassination Attempt Documents LOCKED Away. What are they Hiding?"
|
||||
autoload="false"
|
||||
thumbnail="https://static-3.bitchute.com/live/cover_images/nDPZqzyLkFKW/zSfeNPF-OpY_640x360.jpg">
|
||||
</lazy-video></code></pre>
|
||||
</div>
|
||||
<div class="example">
|
||||
<lazy-video
|
||||
src="https://www.bitchute.com/video/zSfeNPF-OpY"
|
||||
title="Trump Assassination Attempt Documents LOCKED Away. What are they Hiding?"
|
||||
autoload="false"
|
||||
thumbnail="https://static-3.bitchute.com/live/cover_images/nDPZqzyLkFKW/zSfeNPF-OpY_640x360.jpg">
|
||||
</lazy-video>
|
||||
<div class="note">
|
||||
<p>
|
||||
With <code>autoload="false"</code> on Bitchute, users need to click twice: once to load the player, and again to play. This saves bandwidth but may be less convenient.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Bitchute with Autoload</h3>
|
||||
<div class="code-example">
|
||||
<span class="code-label">HTML</span>
|
||||
<pre><code><lazy-video
|
||||
src="https://www.bitchute.com/video/zSfeNPF-OpY"
|
||||
title="Trump Assassination Attempt Documents LOCKED Away. What are they Hiding?">
|
||||
</lazy-video></code></pre>
|
||||
</div>
|
||||
<div class="example">
|
||||
<lazy-video
|
||||
src="https://www.bitchute.com/video/zSfeNPF-OpY"
|
||||
title="Trump Assassination Attempt Documents LOCKED Away. What are they Hiding?">
|
||||
</lazy-video>
|
||||
</div>
|
||||
<h3>Responsive Container (FitVids Style)</h3>
|
||||
<div class="code-example">
|
||||
<span class="code-label">HTML</span>
|
||||
<pre><code><div style="max-width: 100%; width: 100%;">
|
||||
<lazy-video
|
||||
src="https://www.youtube.com/embed/wPr3kws2prM"
|
||||
title="Responsive container example"
|
||||
container-fit="true">
|
||||
</lazy-video>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
<div class="example">
|
||||
<div style="max-width: 100%; width: 100%;">
|
||||
<lazy-video
|
||||
src="https://www.youtube.com/embed/wPr3kws2prM"
|
||||
title="Till We Have Faces by Silent Planet"
|
||||
container-fit="true">
|
||||
</lazy-video>
|
||||
</div>
|
||||
<div class="note">
|
||||
<p>
|
||||
<code>container-fit="true"</code> makes the video fill its parent container while keeping the aspect ratio. Great for fluid layouts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>YouTube with Hidden Title Bar</h3>
|
||||
<div class="code-example">
|
||||
<span class="code-label">HTML</span>
|
||||
<pre><code><lazy-video
|
||||
src="https://www.youtube.com/embed/wPr3kws2prM"
|
||||
title="Hidden title example"
|
||||
hide-title>
|
||||
</lazy-video></code></pre>
|
||||
</div>
|
||||
<div class="example">
|
||||
<lazy-video
|
||||
src="https://www.youtube.com/embed/wPr3kws2prM"
|
||||
title="Hidden title example"
|
||||
hide-title>
|
||||
</lazy-video>
|
||||
</div>
|
||||
<h3>Global Title Control with CSS</h3>
|
||||
<div class="code-example">
|
||||
<span class="code-label">CSS</span>
|
||||
<pre><code>/* Hide titles for all videos */
|
||||
lazy-video {
|
||||
--lv-show-title: none;
|
||||
}
|
||||
|
||||
/* Hide titles for a group */
|
||||
.article-videos lazy-video {
|
||||
--lv-show-title: none;
|
||||
}</code></pre>
|
||||
</div>
|
||||
<h3>Global Alignment Control with CSS</h3>
|
||||
<div class="code-example">
|
||||
<span class="code-label">CSS</span>
|
||||
<pre><code>/* Set alignment for all videos */
|
||||
lazy-video {
|
||||
--lv-align: left;
|
||||
}
|
||||
|
||||
/* Responsive alignment */
|
||||
@media (max-width: 768px) {
|
||||
lazy-video {
|
||||
--lv-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Different alignments for different contexts */
|
||||
.sidebar lazy-video {
|
||||
--lv-align: right;
|
||||
}</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="converting" class="section">
|
||||
<h2>Converting Existing iframes</h2>
|
||||
<p>
|
||||
You can convert existing video iframes to <code><lazy-video></code> by simply changing the tag name.
|
||||
</p>
|
||||
<p>Standard YouTube iframe:</p>
|
||||
<div class="code-example">
|
||||
<span class="code-label">HTML</span>
|
||||
<pre><code><iframe
|
||||
src="https://www.youtube.com/embed/wPr3kws2prM?start=30&rel=0&controls=0"
|
||||
width="560"
|
||||
height="315"
|
||||
title="Till We Have Faces by Silent Planet"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</code></pre>
|
||||
</div>
|
||||
<p>Converted to <code><lazy-video></code> (just change the tag):</p>
|
||||
<div class="code-example">
|
||||
<span class="code-label">HTML</span>
|
||||
<pre><code><lazy-video
|
||||
src="https://www.youtube.com/embed/wPr3kws2prM?start=30&rel=0&controls=0"
|
||||
width="560"
|
||||
height="315"
|
||||
title="Till We Have Faces by Silent Planet"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen>
|
||||
</lazy-video></code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="security" class="section">
|
||||
<h2>Security & Privacy</h2>
|
||||
<p>
|
||||
<code><lazy-video></code> is built with modern web security and privacy best practices:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
All embedded iframes use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/credentialless" target="_blank"><code>credentialless</code></a> attribute. This helps prevent credential leaks and keeps third-party content isolated from your site's cookies and storage.
|
||||
</li>
|
||||
<li>
|
||||
The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#sandbox" target="_blank"><code>sandbox</code></a> attribute is set by default, restricting what the embedded player can do and reducing risk from third-party content.
|
||||
</li>
|
||||
<li>
|
||||
For YouTube, the <code>youtube-nocookie.com</code> domain is used by default, so no tracking cookies are set unless the user interacts with the video.
|
||||
</li>
|
||||
</ul>
|
||||
<div class="note">
|
||||
<p>
|
||||
<strong>Note:</strong> You can override the <code>sandbox</code> attribute if you need to enable additional features, but the default is designed for maximum safety.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="browser-support" class="section">
|
||||
<h2>Browser Support</h2>
|
||||
<p>
|
||||
Works in all modern browsers (Chrome, Firefox, Safari, Edge). Uses standard web component APIs. For IE11 or older, use the <a href="https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements" target="_blank">custom-elements polyfill</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="breaking-change" class="section">
|
||||
<h2>Breaking Change</h2>
|
||||
<p>
|
||||
<strong>April 3, 2025:</strong> The old <code><lazy-youtube></code> element is no longer supported. Please update any code to use <code><lazy-video></code> instead.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="doc-version-note">These docs reflect the latest release version of <strong>@lv.js</strong>.</div>
|
||||
<p>Last updated: Friday, April 11th, 2025</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in a new issue