Is there a way for me to create a shimmering glow effect in the background of a

Question

Is there a way for me to create a shimmering glow effect in the background of a

With the most recent update on Youtube, a glow effect has been added behind the videos by Google. This new feature, dubbed "cinematic mode", creates an appealing beam of light while the video is playing. I'm currently working on a Boostrap5 project and I'm attempting to replicate the same style that Youtube uses, but I'm unsure about the method to achieve this. I am not certain whether it can be achieved through JavaScript, CSS, or an external library.

The snippet of code I am currently working on:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code><!-- CSS code goes here -->

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Other meta tags -->
    <!-- Link to Bootstrap stylesheet -->
    <title>YouFlix</title>
    <!-- Additional links to assets -->

  </head>

  <body class="bg-dark">
    <div class="container">
      <main>


        <div class="py-5 text-center">
          <!-- HTML for logo and page title -->
        </div>

        <div class="row g-5">
          <div class="col-md-7 col-lg-8">
            <video class="embed-responsive embed-responsive-16by9" controls>
              <source src="videoplayback.mp4" type="video/mp4" />
            </video>
            <!-- More HTML content -->
          </div>
          <div class="col-md-5 col-lg-4 order-md-last">
            <!-- HTML for video list -->
          </div>
        </div>
      </main>

      <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">&copy; 2022–2023 YouFlix</p>
      </footer>
    </div>
    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
    <script src="form-validation.js"></script>
  </body>
</html>

javascript css video bootstrap-4 glow

Answer 1

Answer №1

In a similar manner, I approached this task:

const VideoAmbilight = ({ videoSrc }) => {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  let intervalId;

  useEffect(() => {
    const canvasElement = canvasRef.current;
    const context = canvasElement.getContext('2d');

    const videoElement = videoRef.current;

    function repaintAmbilight() {
      context.drawImage(
        videoElement,
        0,
        0,
        videoElement.videoWidth,
        videoElement.videoHeight
      );
    }

    function startAmbilightRepaint() {
      intervalId = window.setInterval(repaintAmbilight, 1000 / 30);
    }

    function stopAmbilightRepaint() {
      clearInterval(intervalId);
    }

    videoElement.addEventListener('play', startAmbilightRepaint);
    videoElement.addEventListener('pause', stopAmbilightRepaint);
    videoElement.addEventListener('ended', stopAmbilightRepaint);
    videoElement.addEventListener('seeked', repaintAmbilight);
    videoElement.addEventListener('loadeddata', repaintAmbilight);

    return () => {
      stopAmbilightRepaint();
      videoElement.removeEventListener('play', startAmbilightRepaint);
      videoElement.removeEventListener('pause', stopAmbilightRepaint);
      videoElement.removeEventListener('ended', stopAmbilightRepaint);
      videoElement.removeEventListener('seeked', repaintAmbilight);
      videoElement.removeEventListener('loadeddata', repaintAmbilight);
    };
  }, []);

  useEffect(() => {
    // Proxy the video request through Next.js server to avoid cross-origin issues
    const fetchVideo = async () => {
      try {
        const response = await axios.get(videoSrc, { responseType: 'blob' });
        const videoBlob = response.data;
        const videoUrl = URL.createObjectURL(videoBlob);
        if (videoRef.current) {
          videoRef.current.src = videoUrl;
        }
      } catch (error) {
        console.error('Failed to fetch video:', error);
      }
    };

    fetchVideo();

    return () => {
      // Revoke the video URL when component is unmounted
      if (videoRef.current && videoRef.current.src) {
        URL.revokeObjectURL(videoRef.current.src);
      }
    };
  }, [videoSrc]);

  return (
    <div className="videoWrapper">
      <div className="ambilightWrapper">
        <div className="aspectRatio">
          <video id="video" ref={videoRef} autoPlay muted loop>
            <source src={videoSrc} type="video/mp4" />
          </video>
        </div>
        <canvas id="ambilight" ref={canvasRef} />
      </div>
    </div>
  );
};

export default VideoAmbilight;

.videoWrapper {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ambilightWrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

#video {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
}

#ambilight {
  filter: blur(80px) opacity(0.5) saturate(300%);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: scale(1.1) translateZ(0);
  width: 100%;
  z-index: -1;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<VideoAmbilight videoSrc="https://cdn...mp4" />

Answer 2

In a similar manner, I approached this task:

const VideoAmbilight = ({ videoSrc }) => {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  let intervalId;

  useEffect(() => {
    const canvasElement = canvasRef.current;
    const context = canvasElement.getContext('2d');

    const videoElement = videoRef.current;

    function repaintAmbilight() {
      context.drawImage(
        videoElement,
        0,
        0,
        videoElement.videoWidth,
        videoElement.videoHeight
      );
    }

    function startAmbilightRepaint() {
      intervalId = window.setInterval(repaintAmbilight, 1000 / 30);
    }

    function stopAmbilightRepaint() {
      clearInterval(intervalId);
    }

    videoElement.addEventListener('play', startAmbilightRepaint);
    videoElement.addEventListener('pause', stopAmbilightRepaint);
    videoElement.addEventListener('ended', stopAmbilightRepaint);
    videoElement.addEventListener('seeked', repaintAmbilight);
    videoElement.addEventListener('loadeddata', repaintAmbilight);

    return () => {
      stopAmbilightRepaint();
      videoElement.removeEventListener('play', startAmbilightRepaint);
      videoElement.removeEventListener('pause', stopAmbilightRepaint);
      videoElement.removeEventListener('ended', stopAmbilightRepaint);
      videoElement.removeEventListener('seeked', repaintAmbilight);
      videoElement.removeEventListener('loadeddata', repaintAmbilight);
    };
  }, []);

  useEffect(() => {
    // Proxy the video request through Next.js server to avoid cross-origin issues
    const fetchVideo = async () => {
      try {
        const response = await axios.get(videoSrc, { responseType: 'blob' });
        const videoBlob = response.data;
        const videoUrl = URL.createObjectURL(videoBlob);
        if (videoRef.current) {
          videoRef.current.src = videoUrl;
        }
      } catch (error) {
        console.error('Failed to fetch video:', error);
      }
    };

    fetchVideo();

    return () => {
      // Revoke the video URL when component is unmounted
      if (videoRef.current && videoRef.current.src) {
        URL.revokeObjectURL(videoRef.current.src);
      }
    };
  }, [videoSrc]);

  return (
    <div className="videoWrapper">
      <div className="ambilightWrapper">
        <div className="aspectRatio">
          <video id="video" ref={videoRef} autoPlay muted loop>
            <source src={videoSrc} type="video/mp4" />
          </video>
        </div>
        <canvas id="ambilight" ref={canvasRef} />
      </div>
    </div>
  );
};

export default VideoAmbilight;

.videoWrapper {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ambilightWrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

#video {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
}

#ambilight {
  filter: blur(80px) opacity(0.5) saturate(300%);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: scale(1.1) translateZ(0);
  width: 100%;
  z-index: -1;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<VideoAmbilight videoSrc="https://cdn...mp4" />

Is there a way for me to create a shimmering glow effect in the background of a

Answer №1

Similar questions

Retrieve latitude and longitude values from a string of varying length

How can we retrieve an API response using Fetch, manipulate it with JSON.stringify(), and what are the next steps in

Is it a beneficial strategy to remove object keys and assign new keys when iterating through thousands of objects in a loop?

a guide to incorporating Google Maps into your website using latitude and longitude coordinates

What is the best way to add form input to a variable without triggering a refresh?

Waiting to run a function until a specified function has finished its execution

Error: Attempting to use the 'append' method on an object lacking the FormData interface. Once more

What is the process for configuring sendmail in a node.js environment?

Unable to retrieve global variable with AJAX/JQuery

An Inquiry into the Basics of CSS and jQuery

Using ngrepeat and ngmodel in Angular does not allow auto-complete with jQuery to function properly

The getElementsByTagName function in Javascript may return an empty list for certain tags while functioning properly for others

Background Disappears Following Website Relocation

Obtain one option from the two types included in a TypeScript union type

Issue: Unable to locate module '/node_modulesprogressbar/package.json'

Authentic clear space within a div, showcasing only the background without any text present

JavaScript Objects: Where am I going astray?

Unable to access style property, encountering error on separate page

Maintaining the aspect ratio of images in Bootstrap Carousel: A complete guide

Fetching data from local JSON file is being initiated twice