Auto Video

Auto-play videos only when they enter the viewport using the fs-autovideo attribute

The fs-autovideo attribute automatically plays and pauses HTML5 videos based on viewport visibility. Videos play when they enter the viewport and pause when they leave, with additional handling for tab visibility changes.

How It Works

The attribute uses the Intersection Observer API to detect when video elements enter or leave the viewport:

• Plays videos when they become visible in the viewport
• Pauses videos when they scroll out of view
• Pauses all videos when the browser tab becomes hidden
• Resumes videos when the tab becomes visible again (if they were playing)
• Works with all HTML5 <video> elements automatically

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-autovideo@2/autovideo.js"></script>

Usage

The attribute automatically detects and manages all <video> elements on the page. No attribute needs to be added to individual videos.

Basic Video

<video src="/videos/demo.mp4" loop muted>
  <source src="/videos/demo.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

The attribute automatically disables the autoplay attribute on video elements to take full control of playback based on viewport visibility.

Multiple Videos

<!-- All videos are automatically managed -->
<video src="/videos/hero.mp4" loop muted></video>

<video src="/videos/feature-1.mp4" loop muted></video>

<video src="/videos/feature-2.mp4" loop muted></video>

Each video independently plays when it enters the viewport and pauses when it leaves.

Behavior Details

Viewport Intersection

The attribute observes each video element and tracks its intersection state:

• When a video enters the viewport → calls video.play()
• When a video exits the viewport → calls video.pause()

Tab Visibility

When the user switches tabs or minimizes the browser:

• All videos are paused when the tab becomes hidden
• Videos that were playing resume when the tab becomes visible again
• Videos that were already paused remain paused

This behavior helps reduce unnecessary resource usage when the page is not visible to the user.

Best Practices

Use Loop and Muted

For background videos, always include loop and muted attributes:

<video src="/videos/background.mp4" loop muted playsinline></video>

The playsinline attribute is recommended for iOS devices to prevent fullscreen playback.

Video Formats

Provide multiple formats for better browser compatibility:

<video loop muted playsinline>
  <source src="/videos/demo.webm" type="video/webm">
  <source src="/videos/demo.mp4" type="video/mp4">
</video>

Performance Considerations

• Optimize video files: Use compressed formats and appropriate resolutions
• Lazy loading: Videos are only played when visible, reducing initial page load
• Resource cleanup: The attribute properly disconnects observers when destroyed

Technical Implementation

The attribute creates an IntersectionObserver that monitors all video elements:

const observer = new IntersectionObserver((entries) => {
  for (const { target, isIntersecting } of entries) {
    if (isIntersecting) target.play();
    else target.pause();
  }
}, {});

Additionally, it listens to the visibilitychange event to handle tab switching:

document.addEventListener('visibilitychange', () => {
  if (document.hidden) video.pause();
  else video.play();
});

Troubleshooting

Videos Not Playing

• Ensure videos have the muted attribute (browsers block autoplay of unmuted videos)
• Check that video files are accessible and properly encoded
• Verify the video element is visible in the viewport

iOS Compatibility

• Add the playsinline attribute to prevent fullscreen playback
• Ensure videos are muted for autoplay to work

Multiple Instances

The attribute automatically manages all videos on the page. If you need to exclude specific videos from auto-playback, you’ll need to handle them separately outside of this attribute’s scope.