Static Website: Youtube Player

How to insert youtube player on the static page

Embed Youtube Video with Certain Range

We can create an HTML page to play a YouTube video for a specific range, such as from minute 2:30 to 3:00, using YouTube’s embed feature and some JavaScript. We can specify the start and end times using the YouTube Player API. Here’s how we can do it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Video Range</title>
</head>
<body>
    <div id="video-container">
        <iframe id="youtube-video" width="560" height="315" 
                src="https://www.youtube.com/embed/YOUR_VIDEO_ID?start=150&end=180&autoplay=1"
                frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
    </div>

    <script>
        // Your YouTube video ID goes here
        const videoId = 'YOUR_VIDEO_ID';  // Replace with your YouTube video ID
        
        // Function to update the iframe URL with the start and end times
        function updateVideoRange(start, end) {
            const iframe = document.getElementById('youtube-video');
            iframe.src = `https://www.youtube.com/embed/${videoId}?start=${start}&end=${end}&autoplay=1`;
        }

        // Call the function with the start and end times (in seconds)
        updateVideoRange(150, 180);  // From 2:30 (150 seconds) to 3:00 (180 seconds)
    </script>
</body>
</html>

How it works:

  1. The iframe tag embeds the YouTube video into your page.
  2. The src URL has the following parameters:
  • start=150: This sets the start time of the video in seconds (2 minutes 30 seconds = 150 seconds).
  • end=180: This sets the end time of the video in seconds (3 minutes = 180 seconds).
  • autoplay=1: This will automatically start playing the video when the page loads.
  1. The updateVideoRange JavaScript function dynamically sets the src of the iframe, allowing you to adjust the start and end times if needed.

Notes:

  • Replace ‘YOUR_VIDEO_ID’ with the actual YouTube video ID from the URL. For example, if your YouTube video URL is https://www.youtube.com/watch?v=dQw4w9WgXcQ, the video ID is dQw4w9WgXcQ.
  • You can adjust the start and end times (in seconds) to match the specific range you want.
  • This method works well for a static website, and you don’t need any server-side processing.

Responsive YouTube Embed (Fluid Width and Height)

To ensure the video scales properly across devices (responsive design), you can use a CSS trick with padding-bottom to maintain the aspect ratio of the video.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive YouTube Embed</title>
    <style>
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            overflow: hidden;
            max-width: 100%;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</body>
</html>

Why it works: The padding-bottom: 56.25% ensures a 16:9 aspect ratio, and the iframe will resize proportionally to the container’s width.

Autoplay, Mute, and Loop

You can enhance user experience by adding additional parameters to the YouTube embed URL to control autoplay, mute, and loop features.

1

<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=YOUR_VIDEO_ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Parameters

  • autoplay=1: Starts the video automatically.
  • mute=1: Mutes the video.
  • loop=1: Loops the video continuously.
  • playlist=YOUR_VIDEO_ID: Loops the same video by adding it to the playlist.

Hide YouTube Controls

If you want a clean look and hide YouTube’s controls, you can add the controls=0 parameter to the iframe URL.

Example:

controls=0: Hides the YouTube player controls.

Start at a Specific Time

You can also specify the start time of the video directly in the URL (in seconds) using start=.

Example:

1

<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID?start=60" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

start=60: The video will start at 1:00 minute (60 seconds).

Embed Vimeo Videos

You can embed Vimeo videos in a similar way to YouTube by using their iframe embed code.

Example:

1

<iframe src="https://player.vimeo.com/video/YOUR_VIDEO_ID?autoplay=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Replace YOUR_VIDEO_ID with the Vimeo video ID.

YouTube Playlist Embeds

If you want to embed a playlist of videos instead of a single video, use the following format:

Example:

1

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=YOUR_PLAYLIST_ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Replace YOUR_PLAYLIST_ID with the playlist ID from YouTube.

Embedding Facebook, Instagram, or Twitter Videos

For Facebook, Instagram, or Twitter videos, the embedding process is also quite simple. Most platforms offer a “share” button where you can directly copy the embed code.

Facebook Example:

Instagram Example:

Replace YOUR_VIDEO_URL or YOUR_INSTAGRAM_POST_URL with the actual URL of the video.

You can create a clickable thumbnail image that opens the video in a lightbox (pop-up). This helps you reduce clutter and makes the page look cleaner.

Example:

1
2
3

<a href="https://www.youtube.com/watch?v=YOUR_VIDEO_ID" target="_blank">
    <img src="YOUR_THUMBNAIL_IMAGE_URL" alt="Video Thumbnail" />
</a>

You can also use libraries like Lightbox2 or fancybox to create more interactive pop-up video views.

Use Custom Player Controls

If you’re using the YouTube or Vimeo API, you can create custom controls, such as play, pause, skip, volume, etc., tailored to your website’s design.

Use the YouTube Iframe API (JavaScript) to control the video programmatically.

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<iframe id="video-iframe" width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_ID?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('video-iframe', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }
</script>
comments powered by Disqus