Need help for an iFrame embed timer for school project

  • 13 November 2021
  • 4 replies
  • 507 views
S

Hi everyone,

We have a school project to do and I wanted to add a visual timer, but not the one we have at the bottom because the countdown is not dedicated to everyone, and is about 5 days long.

I tried to add an embed one from https://www.watchisup.fr/ but the timer appears with a play button and everyone must click on it in order to see it in a popup window…

What I wanted to do is for the timer to be displayed straight in Miro, with the clock ticking automatically for everyone. Is it possible to display an animated timer in that way? I can for example directly add a google slide document in it and visualize it… why I can with my timer?

Also if it isn’t possible, when I click on the play button it opens a popup page inside Miro, isn’t it possible to open it like youtube videos or google slides, on the board directly ?

 

Thanks in advance,

Sacha

 

4 replies

D

THANKS, was hoping for it to be constant w/o hitting play. i will give it a shot though

Robert Johnson
Userlevel 7
Badge +12

@David Look - The following embeds fine for me (copy-pasted from your reply):

<iframe src="https://free.timeanddate.com/countdown/i8dehp0b/n171/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cacfff/cpc000/pcf47c28/tcfff/fs100/szw448/szh189/tatConstruction%20Starts/tacfff/tptTime%20since%20Event%20started%20in/tpc000/macfff/mpc000/iso2023-01-18T08:00:00" allowtransparency="true" frameborder="0" width="241" height="94"></iframe>

Using the Paste iFrame code action:

 

The result:

 

And when the “play” button is clicked:

 

Note: Not all iFrame code will automatically play/be displayed - more on this in the Embedding media to boards help center article.

Visual Thinker | Volunteer Community Moderator
D

so we cannot ember an iFrame or other javascript type of code on a page  

<iframe src="https://free.timeanddate.com/countdown/i8dehp0b/n171/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cacfff/cpc000/pcf47c28/tcfff/fs100/szw448/szh189/tatConstruction%20Starts/tacfff/tptTime%20since%20Event%20started%20in/tpc000/macfff/mpc000/iso2023-01-18T08:00:00" allowtransparency="true" frameborder="0" width="241" height="94"></iframe>

 

or

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

</body>
</html>

Anthony Roux
Rank
Userlevel 5
Badge +1

Hi @Sacha,

 

It is not possible today to select if the embed widget should open natively on the board (like a YouTube video) or in a modal view. We are working on improving the way developers can use this widget in the future.

I don’t believe there is a simple way of building a timer that will be visible by all users on the board today. You could build your own version using Miro’s shapes and lines and animate it thanks to the app by moving these shapes. 

 

The other solution would be: If you have a page with html/css/js that has a timer you could load it in a panel or modal iframe as an app. However, I don’t think this will solve your issue.

Reply


Terms & Conditions