I added a Video to my funnel but it doesn´t play

Timo · January 12, 2025, 10:22am

I added a video to my funnel but it doesn´t play. (Not embed)
In the editor it works but on the live page it doesn´t.
I tried all settings. Auto play, show controls, add thumbnails etc. but it never works.
The Video is displayed on the funnel but not playable.
When I use an embed, it works - but it doesn´t look good with all the youtube controls.
I want to add it directly.
Did anybody had this issue already?

Thank you!!!

anwerashif · January 13, 2025, 1:07am

Hi @Timo, welcome to the community!

Thanks for sharing your issue. To help troubleshoot why your video isn’t playing on the live page, could you provide the following details?

A reference URL for your funnel page where the issue occurs.
The format of the video file (e.g., MP4, WebM, etc.).
Any custom code or settings applied to the video element.

This information will help us diagnose the issue more accurately. Looking forward to your response!

Cheers!

Timo · January 14, 2025, 8:46am

Hello
ok I added now 2 videos. 1 with youtube which works and 1 with the video element, which doesn´t work.

VitalungExtra Kapseln Angebot
MOV
There is no custom code to the video but there is a custom coded timer on the top of the page.
And now we found out, that this is the reason why the video doesn´t work.
→ Can somebody maybe help to fix our code so that we can use our timer and the video?

Thank you so much!

Custom Code:

Dynamischer Timer

/* Isolierter Stil */
.timer-wrapper {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #f8e3eb, #f4e9d4);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 600px;
  margin: auto;
}

.timer-wrapper h1 {
  font-size: 22px;
  color: #8e295a;
  margin-bottom: 20px;
}

.timer {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.timer .time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #8e295a;
  border-radius: 5px;
  padding: 10px;
  min-width: 70px;
}

.timer .time-box span {
  font-size: 20px;
  font-weight: bold;
  color: #8e295a;
}

.timer .time-box p {
  font-size: 12px;
  color: #8e295a;
  margin: 0;
}

.timer-wrapper .note {
  font-size: 12px;
  color: #8e295a;
  margin-top: 10px;
}

/* Mobile Anpassungen */
@media (max-width: 480px) {
  .timer {
    flex-wrap: wrap;
    justify-content: center;
  }

  .timer .time-box {
    margin-bottom: 10px;
  }
}

/* Spezifischer Fix: Verberge den Debug-Text */
body:after {
  content: none !important; /* Entfernt Inhalt aus Pseudo-Elementen */
  display: none !important; /* Macht es unsichtbar */
}

/* Falls der Debug-Text direkt sichtbar ist */
[style*="flex-direction:column"] {
  display: none !important;
}

Angebotstitel

00

Tage

00

Stunden

00

Minuten

00

Sekunden

*Nur solange der Vorrat reicht

Timo · January 14, 2025, 8:53am

Somehow the code doesn´t show completely in my last response. So here a screenshot with the first lines: (Can only add 2 images here )

anwerashif · January 16, 2025, 4:14pm

Hi @Timo,

In your custom HTML add following code only

<div class="timer-wrapper">
  <h1 id="offer-title">Einmaliges Januar-Angebot vom 15 bis 18.*</h1>
  <div class="timer">
    <div class="time-box">
      <span id="days">02</span>
      <p>Tage</p>
    </div>
    <div class="time-box">
      <span id="hours">21</span>
      <p>Stunden</p>
    </div>
    <div class="time-box">
      <span id="minutes">47</span>
      <p>Minuten</p>
    </div>
    <div class="time-box">
      <span id="seconds">16</span>
      <p>Sekunden</p>
    </div>
  </div>
  <p class="note">*Nur solange der Vorrat reicht</p>
</div>
<style>
  .timer-wrapper {
    font-family: Arial, sans-serif;
    background: linear-gradient(to right, #f8e3eb, #f4e9d4);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    max-width: 600px;
    margin: auto;
    z-index: 0;
    position: relative;
    pointer-events: none;
    /* Keine Blockade von Interaktionen */
  }

  .timer-wrapper * {
    pointer-events: auto;
    /* Interaktionen innerhalb des Timers */
  }

  .timer-wrapper h1 {
    font-size: 22px;
    color: #8e295a;
    margin-bottom: 20px;
  }

  .timer {
    display: flex;
    justify-content: center;
    gap: 15px;
  }

  .timer .time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #8e295a;
    border-radius: 5px;
    padding: 10px;
    min-width: 70px;
  }

  .timer .time-box span {
    font-size: 20px;
    font-weight: bold;
    color: #8e295a;
  }

  .timer .time-box p {
    font-size: 12px;
    color: #8e295a;
    margin: 0;
  }

  .timer-wrapper .note {
    font-size: 12px;
    color: #8e295a;
    margin-top: 10px;
  }
</style>
<script>
  (function() {
    const months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];

    function updateOfferTitle(today, startDate, endDate) {
      const currentMonthName = months[today.getMonth()];
      const startDay = String(startDate.getDate()).padStart(2, "0");
      const endDay = String(endDate.getDate()).padStart(2, "0");
      const title = `Einmaliges ${currentMonthName}-Angebot vom ${startDay} bis ${endDay}.*`;
      document.getElementById("offer-title").textContent = title;
    }

    function startCountdown(endDateTime) {
      function countdown() {
        const now = new Date().getTime();
        const timeLeft = endDateTime - now;
        if (timeLeft <= 0) {
          document.getElementById("days").textContent = "00";
          document.getElementById("hours").textContent = "00";
          document.getElementById("minutes").textContent = "00";
          document.getElementById("seconds").textContent = "00";
          clearInterval(interval);
          return;
        }
        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
        document.getElementById("days").textContent = String(days).padStart(2, "0");
        document.getElementById("hours").textContent = String(hours).padStart(2, "0");
        document.getElementById("minutes").textContent = String(minutes).padStart(2, "0");
        document.getElementById("seconds").textContent = String(seconds).padStart(2, "0");
      }
      const interval = setInterval(countdown, 1000);
      countdown();
    }
    const today = new Date();
    const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
    const endDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 3);
    const endDateTime = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), 23, 59, 59);
    updateOfferTitle(today, startDate, endDate);
    startCountdown(endDateTime);
  })();
</script>

Hope this will fix your problem.

Timo · January 17, 2025, 8:39am

Hello
Thank you so much! Will try it today