使用 PHP 内联 Styles 添加视频背景

Question

Is there a way to swap out the image URL and replace it with a video file for use as a background video instead of image?

Here's the code for my background image i want to convert to a background video:

echo '<style type="text/css" media="screen">
        body.front-page {
            background-image: url(' . esc_html( $image ) . ');
</style>';

I need to apply the video to this body.front-page class and not sure what the best method is however i would prefer using PHP.

Answer 1

First you should place a video like this:

<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>

Then add some CSS to send it background:

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
} 

Working example: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp