Olanetsoft · May 25, 2025 16:24
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Method 1: Native Lazy Loading</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header>
      <h1>Method 1: Native Lazy Loading</h1>
    </header>

    <!-- Hero video - loads immediately -->
    <section class="hero">
      <video class="hero-video" autoplay muted playsinline loop>
        <source src="videos/hero-demo.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <div class="hero-content">
        <h2>Native Lazy Loading</h2>
        <p>Simple and effective</p>
      </div>
    </section>

    <!-- Spacer to create scroll distance -->
    <div class="spacer">
      <div>
        <h2>Scroll down to see lazy loading in action</h2>
        <p>The video below won't load until you get close to it</p>
      </div>
    </div>

    <!-- Demo section -->
    <section class="demo-section">
      <h2>Native Lazy Loading Demo</h2>

      <!-- Lazy loaded video -->
      <div class="video-container">
        <video class="lazy-video" controls loading="lazy">
          <source src="videos/demo-video.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>

      <!-- Code example -->
      <div class="code-example">
        <pre><code>&lt;video 
    controls
    loading="lazy"
    &lt;source src="video.mp4" type="video/mp4"&gt;
 &lt;/video&gt;</code></pre>
      </div>

      <!-- Method information -->
      <div class="method-info">
        <h3>How Native Lazy Loading Works</h3>
        <p>
          The <code>loading="lazy"</code> attribute tells the browser to defer
          loading the video until it's about to enter the viewport. This is the
          simplest way to implement lazy loading with zero JavaScript required.
        </p>

        <div class="pros-cons">
          <div class="pros">
            <h3>Advantages</h3>
            <ul>
              <li>Zero JavaScript required</li>
              <li>Built into modern browsers</li>
              <li>Simple one-attribute implementation</li>
              <li>Automatic bandwidth savings</li>
              <li>No external dependencies</li>
            </ul>
          </div>
          <div class="cons">
            <h3>Limitations</h3>
            <ul>
              <li>Limited browser support for videos</li>
              <li>No control over loading threshold</li>
              <li>Cannot coordinate with autoplay</li>
              <li>Browser-dependent behavior</li>
              <li>No loading status feedback</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Method 1: Native Lazy Loading</title>
	<link rel="stylesheet" href="css/styles.css" />
	</head>
	<body>
	<header>
	<h1>Method 1: Native Lazy Loading</h1>
	</header>

	<!-- Hero video - loads immediately -->
	<section class="hero">
	<video class="hero-video" autoplay muted playsinline loop>
	<source src="videos/hero-demo.mp4" type="video/mp4" />
	Your browser does not support the video tag.
	</video>
	<div class="hero-content">
	<h2>Native Lazy Loading</h2>
	<p>Simple and effective</p>
	</div>
	</section>

	<!-- Spacer to create scroll distance -->
	<div class="spacer">
	<div>
	<h2>Scroll down to see lazy loading in action</h2>
	<p>The video below won't load until you get close to it</p>
	</div>
	</div>

	<!-- Demo section -->
	<section class="demo-section">
	<h2>Native Lazy Loading Demo</h2>

	<!-- Lazy loaded video -->
	<div class="video-container">
	<video class="lazy-video" controls loading="lazy">
	<source src="videos/demo-video.mp4" type="video/mp4" />
	Your browser does not support the video tag.
	</video>
	</div>

	<!-- Code example -->
	<div class="code-example">
	<pre><code><video
	controls
	loading="lazy"
	<source src="video.mp4" type="video/mp4">
	</video></code></pre>
	</div>

	<!-- Method information -->
	<div class="method-info">
	<h3>How Native Lazy Loading Works</h3>
	<p>
	The <code>loading="lazy"</code> attribute tells the browser to defer
	loading the video until it's about to enter the viewport. This is the
	simplest way to implement lazy loading with zero JavaScript required.
	</p>

	<div class="pros-cons">
	<div class="pros">
	<h3>Advantages</h3>
	<ul>
	<li>Zero JavaScript required</li>
	<li>Built into modern browsers</li>
	<li>Simple one-attribute implementation</li>
	<li>Automatic bandwidth savings</li>
	<li>No external dependencies</li>
	</ul>
	</div>
	<div class="cons">
	<h3>Limitations</h3>
	<ul>
	<li>Limited browser support for videos</li>
	<li>No control over loading threshold</li>
	<li>Cannot coordinate with autoplay</li>
	<li>Browser-dependent behavior</li>
	<li>No loading status feedback</li>
	</ul>
	</div>
	</div>
	</div>
	</section>
	</body>
	</html>