How to Embed a Football Live Streaming Player on Blogger (With API Customization)

Football lovers and website owners can now integrate live football streaming on their Blogger sites using simple HTML, CSS, and JavaScript. In this guide, we will walk you through how to embed a football live streaming player, customize it with your own API data, and make it mobile-friendly.

Step 1: Add the Live Streaming Code to Blogger

To integrate the Football Live Streaming Player on your Blogger website, follow these steps:

1. Log in to your Blogger Dashboard.

2. Go to Theme > Edit HTML.

3. Scroll down and find <body>.

4. Copy and paste the following live streaming code just before </body>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Football Live Streaming</title>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <script src='//whephiwums.com/vignette.min.js' data-zone='8859629' data-sdk='show_8859629'></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #121212;
            color: white;
            text-align: center;
            margin: 0;
            padding: 0;
        }
        .header {
            background: url('https://example.com/football-banner.jpg') no-repeat center;
            background-size: cover;
            padding: 30px;
            font-size: 24px;
            font-weight: bold;
        }
        .loading {
            margin: 20px;
            font-size: 18px;
            font-weight: bold;
        }
        .match-list {
            margin: 20px auto;
            max-width: 600px;
        }
        .match-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #1e1e1e;
            padding: 15px;
            margin: 10px 0;
            border-radius: 10px;
            cursor: pointer;
            text-align: center;
        }
        .team-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .team-info img {
            width: 60px;
            height: 60px;
            border-radius: 10px;
        }
        .vs-text {
            font-size: 20px;
            font-weight: bold;
        }
        .match-details {
            flex-grow: 1;
            text-align: center;
        }
        .match-league {
            font-size: 16px;
            font-weight: bold;
            background: #ffcc00;
            color: black;
            padding: 5px 10px;
            border-radius: 5px;
            display: inline-block;
            margin-bottom: 5px;
        }
        .match-time {
            color: #00ffcc;
            font-size: 16px;
            font-weight: bold;
        }
        .video-container {
            display: none;
            padding: 20px;
        }
        video {
            width: 100%;
            border-radius: 10px;
        }
        .watch-btn {
            background: #ffcc00;
            color: black;
            padding: 10px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            margin: 5px;
        }
        .live-indicator {
            width: 50px;
            margin-top: 5px;
        }
        .back-btn {
            background: red;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="header">⚽ Live Football Streaming</div>
    
    <div id="loading" class="loading">Loading...</div>
    <div id="match-list" class="match-list"></div>

    <div id="video-container" class="video-container">
        <button id="back-btn" class="back-btn">🔙 Back</button>
        <video id="video-player" controls></video>
        <div id="server-buttons"></div>
    </div>

    <script>
        let selectedMatch = null;
        let isOnVideoScreen = false;

        function format12HourTime(timestamp) {
            const date = new Date(timestamp * 1000);
            const options = { hour: 'numeric', minute: 'numeric', hour12: true };
            return date.toLocaleString('en-US', options);
        }

        document.addEventListener("DOMContentLoaded", function () {
            const matchList = document.getElementById("match-list");
            const videoContainer = document.getElementById("video-container");
            const videoPlayer = document.getElementById("video-player");
            const serverButtons = document.getElementById("server-buttons");
            const loading = document.getElementById("loading");
            const backBtn = document.getElementById("back-btn");

            fetch("https://raw.githubusercontent.com/painglay272/hello/refs/heads/main/footballapi.json")
                .then(response => response.json())
                .then(data => {
                    loading.style.display = "none"; // Hide loading text
                    data.forEach(match => {
                        const div = document.createElement("div");
                        div.className = "match-item";
                        div.innerHTML = `
                            <div class="team-info">
                                <img src="${match.home_team_logo}" alt="${match.home_team_name}">
                                <span>${match.home_team_name}</span>
                            </div>
                            <div class="match-details">
                                <span class="match-league">${match.league_name}</span>
                                <p class="vs-text">VS</p>
                                <p class="match-time">📅 ${format12HourTime(match.match_time)}</p>
                                ${match.servers.length > 0 ? `<img src="https://raw.githubusercontent.com/painglay272/hello/1dbe979dd38b181e437935034226f55575c39b50/image_search_1738164867840.gif" class="live-indicator">` : ""}
                            </div>
                            <div class="team-info">
                                <span>${match.away_team_name}</span>
                                <img src="${match.away_team_logo}" alt="${match.away_team_name}">
                            </div>
                        `;
                        div.onclick = function () {
                            selectedMatch = match;
                            show_8859629().then(() => {
                                loadVideoPlayer();
                            });
                        };
                        matchList.appendChild(div);
                    });
                });

            function loadVideoPlayer() {
                if (!selectedMatch) return;

                matchList.style.display = "none";
                videoContainer.style.display = "block";
                isOnVideoScreen = true;
                serverButtons.innerHTML = "";

                if (selectedMatch.servers.length === 0) {
                    alert("Please Watch When The Matches");
                    matchList.style.display = "block";
                    videoContainer.style.display = "none";
                    isOnVideoScreen = false;
                    return;
                }

                // Play the first server's stream automatically
                videoPlayer.src = selectedMatch.servers[0].stream_url;
                videoPlayer.play();

                selectedMatch.servers.forEach(server => {
                    const button = document.createElement("button");
                    button.className = "watch-btn";
                    button.innerText = server.name;
                    button.onclick = function () {
                        videoPlayer.src = server.stream_url;
                        videoPlayer.play();
                    };
                    serverButtons.appendChild(button);
                });
            }

            // Handle Back Button
            backBtn.onclick = function () {
                matchList.style.display = "block";
                videoContainer.style.display = "none";
                isOnVideoScreen = false;
                videoPlayer.pause();
            };

            // Override Default Back Button Behavior
            window.addEventListener("popstate", function (event) {
                if (isOnVideoScreen) {
                    matchList.style.display = "block";
                    videoContainer.style.display = "none";
                    isOnVideoScreen = false;
                    videoPlayer.pause();
                } else {
                    Telegram.WebApp.close(); // Exit App
                }
            });
        });
    </script>

</body>
</html>

Step 2: Change the API Link

Replace "https://raw.githubusercontent.com/painglay272/hello/refs/heads/main/footballapi.json" with your own API link that contains match details in JSON format.

---

Conclusion

With this code, you can embed a football live streaming player on Blogger and allow users to watch live football matches. If you need AdSense approval, ensure that your website has original content, a privacy policy, and follows Google's guidelines.

Read Also :-

Labels : #blogger ,#htlm ,#script ,

Getting Info...

Delta Coder

How to Embed a Football Live Streaming Player on Blogger (With API Customization)

Step 1: Add the Live Streaming Code to Blogger

Step 2: Change the API Link

Post a Comment

How to Create an Image with AI

How Artificial Intelligence is Changing Our Daily Lives