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

[Timo]

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]

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?

1. A reference URL for your funnel page where the issue occurs.
2. The format of the video file (e.g., MP4, WebM, etc.).
3. 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]

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

1. VitalungExtra Kapseln Angebot
2. MOV
3. 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]

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]

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]

Hello
Thank you so much! Will try it today

[Leira_Anne]

Update: The Hidden CSS Conflict

Hey @Timo

Jumping in here to finally close the loop on why your video wasn’t playable! The issue isn’t with the video element itself, but rather a tiny snippet hidden inside your custom Timer CSS that is breaking the Funnelish page structure.

In your original custom code, you have this specific block at the very bottom:

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

The Fix: You need to completely delete that specific block of CSS.

Because flex-direction: column is a core structural property used by Funnelish to build the rows, columns, and video wrappers on your page, using a “wildcard” rule to hide anything containing that style completely breaks the invisible wrappers around the video player, making it impossible to click or play.

Remove that line, save your page, and do a hard refresh (Ctrl+F5) on the live view. Your timer and your video should now work perfectly together!

If you ever need to hide a specific element in the future, always target its exact #ID rather than using wildcard [style*="..."] selectors to ensure your other elements remain untouched.