Skip to Content
Menu
This question has been flagged

ello there :)

I need to embed a background video on my website made with Odoo 14. If I upload the video to YouTube, the website visitor is asked whether or not the video from YT shall be loaded. As a background video, the visitor cannot even click that box. 

Naturally I've uploaded the video to my own server but i cannot get Odoo to accept that. Only YouTube, Dailymotion, Vimeo and Youku are accepted. Why not any other source?

How can I simply use the HTML video tag?

I am thankful for any hint.

Avatar
Discard

I have same problem!

Best Answer

Hi Parker

try this approach, maybe it works:

Since you’ve already uploaded the video to your server, note the file path (e.g., /path/to/your/video.mp4). 

To use the HTML <video> tag, you'll need to edit the page's HTML directly. Here’s how to embed it as a background video:

  1. Navigate to the page where you want the background video.
  2. Switch to Edit mode, then add a new HTML block or open an existing HTML block if you already have one.
  3. Insert the following code to embed the video as a background:
<style>
    .background-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        overflow: hidden;
    }
</style>
<video class="background-video" autoplay loop muted playsinline>
    <source src="/path/to/your/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Replace "/path/to/your/video.mp4" with the actual path of your video file.


Explanation of the Code
  • autoplay: Starts the video automatically when the page loads.
  • loop: Replays the video in a loop.
  • muted: Ensures no sound plays by default, especially important for background videos.
  • playsinline: Allows the video to play inline on mobile devices.
  • CSS Styling:
    • .background-video CSS class ensures the video covers the entire page.
    • object-fit: cover; keeps the video properly scaled without stretching.

Fallback Image: Add a fallback background image for browsers or devices that don’t support the video tag:

<div style="background: url('/path/to/fallback-image.jpg') no-repeat center center; background-size: cover;">
    <video class="background-video" autoplay loop muted playsinline>
        <source src="/path/to/your/video.mp4" type="video/mp4">
    </video>
</div>


Let me know if that works for you


regards

Daniel

Avatar
Discard
Related Posts Replies Views Activity
1
Jul 25
505
2
Jun 25
2131
3
Apr 25
2394
1
Apr 25
1510
1
Dec 24
2139