YouTube video embed in website

The easiest way to play videos in HTML is to use YouTube.

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/7PIji8OubXU?si=5b2y29n6TRPOqO8M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Here we can see a simple <iframe> tag for embed video which is generated from the YouTube embed option.

In the 'src' attribute of the iframe, we can control the video. let's see If we want to autoplay the video just add autoplay=1 after the '?' -mark in the src link. Example: src="https://www.youtube-nocookie.com/embed/7PIji8OubXU?si=5b2y29n6TRPOqO8M?autoplay=1". If you want to mute the video apply mute=1 .

loop=1 makes the video loop forever and controls=1 gives you full control to display the video player like YouTube web/app. When you make `loop=0`, the video will play once. And controls=0 not display controls in the video player.

Also, you can apply them all together with a '&' - mark. Ex. `src="https://www.youtube-nocookie.com/embed/7PIji8OubXU?si=5b2y29n6TRPOqO8M?autoplay=1&mute=1&controls=1&loop=1"`

In the above, I discuss a static video embed system. Now I try to discuss dynamic video embed in the webpage. For that, I use PHP MySql for it.

Dynamic YouTube video display

<?php
$url = 'https://youtu.be/Do34JpuKxsA?si=VcLadyROC8mJdjcA';

// Parse the URL
$parsed_url = parse_url($url);

if ($parsed_url !== false && isset($parsed_url['path'])) {
    // Extract the video ID from the URL
    $path = ltrim($parsed_url['path'], '/');
    $video_id = strtok($path, '?'); // Get the video ID before any query parameters

    // Now you can store $video_id in your MySQL database
    // Example MySQL connection and query:
    $servername = "your_server";
    $username = "your_username";
    $password = "your_password";
    $database = "your_database";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $database);

    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // Insert the video ID into the database (assuming a table named 'videos' and a column named 'video_id')
    $sql = "INSERT INTO videos (video_id) VALUES ('$video_id')";

    if ($conn->query($sql) === TRUE) {
        echo "Video ID inserted successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

    $conn->close();
} else {
    echo "Invalid YouTube URL";
}
?>

After clicking the share button on YouTube you will get a link then you insert that into your database table and get it as like the above example.

Here PHP's built-in functions parse_url() and parse_str() to extract the video ID and then store it in your database.

Now for the display on the webpage, you can try the below code as your database structure and code base.

<?php

$video = "SELECT * FROM `product_video`"; // here `product_video` is my database table name.
$displayQuery = mysqli_query($connection, $video);

$labelTxt = "<h2>Your Product Video: </h2>";

if (mysqli_num_rows($displayQuery) > 0) {
    while ($row = mysqli_fetch_assoc($displayQuery)) {
        $videoUrl = $row['video_link'];

        // Extract video ID from the URL
        $parsed_url = parse_url($videoUrl);
        if (isset($parsed_url['path'])) {
            $path = ltrim($parsed_url['path'], '/');
            $video_id = strtok($path, '?'); // Get the video ID before any query parameters
        }

        echo '<p><strong>Video Url: </strong>' . $videoUrl . '</p>';
        echo '<iframe width="560" height="315" src="https://www.youtube.com/embed/'.$video_id.'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';

         // Here I also display edit the url for new video. file path as your own structure.
        echo "<br/><a href='./components/controllers/edit/edit-product-video.php?videoEdit=" . $row['id'] . "' class='btn btn-success'>
                <i class='bi bi-pencil-square'></i> Edit
              </a>";
    }
} else {
    echo "$labelTxt <h5 class='my-5 text-danger'>Video not found!</h5>";
}
?>

This code uses parse_url() to extract the video ID from the YouTube URL and then embed the video using the extracted ID in the iframe. Make sure the database column video_link contains the full YouTube URLs for this code to work correctly.

I hope this article helps you a little bit to achieve your goals.

Details of YouTube Video Embed

Table of contents

Dynamic YouTube video display