Emebed HTML Animation

Gerald O

• July 02, 2023 19:45
• Edited

Hi,

I tried to embed this HTML animation :

<iframe id="pcanimation"
    title="Parcours Client Animation"
    width="100%"
    height="100%"
    src="https://htmlanimation.procheduweb.fr/HTMLAnimation/Parcoursclient/Parcourclientanimation.html" </iframe>

 

and I've got this tiny output".

any suggestions ?

Thanx in advance

Gerald

0

• 

  Ariel H.

  • July 03, 2023 12:15

  Hi Gerald,

  Thank you for contacting us.

  The size issue you are experiencing with the embedded script appears to be related to the external page content, rather than Brizy or any specific page builder. If the external page lacks responsive design or proper sizing configurations, it may not display at its intended full size within iframes on any platform.

  To resolve this, I suggest reaching out to the developers of the external page and seeking guidance on adjusting its size for proper embedding in iframes. They might be able to make adjustments to the page's code to ensure it scales correctly within iframes on different platforms.

  If you have any further questions, feel free to let us know.

  Best regards,
  Ariel H.

  0
• 

  Gerald O

  • July 03, 2023 12:31

  Hi,
  I did my animation on genial.ly and exoprt it on HTML, put the files on my server and did an Iframe to play it on my Wordpress sites and LMS.
  
  So, if you check the output, it's seems responsive, Have a quik look
  
  https://htmlanimation.procheduweb.fr/HTMLAnimation/Parcoursclient/Parcourclientanimation.html
  
  I did have one time a proper size to add CSS code with a help of a friend but I din't took the time to save it (my bad).
  Something like put size on the class ID
  
  Any idea on what I'm talking about  ?
  
  As you can see, my level on reading and writing code is very close to level 0
  
  Thanx

  0
• 

  KC George

  • July 03, 2023 13:35

  Hi Gerald,

  The code for full width and full height needs to added as a CSS. Please use this code. Please see my test page here https://brizytest.online/iframe/

  <iframe src="https://htmlanimation.procheduweb.fr/HTMLAnimation/Parcoursclient/Parcourclientanimation.html"></iframe>
  
  <style>
      body{
          margin: 0; /* Remove default margin */
      }
      iframe{      
          display: block;  /* iframes are inline by default */   
          height: 100vh;  /* Set height to 100% of the viewport height */   
          width: 100vw;  /* Set width to 100% of the viewport width */     
          border: none; /* Remove default border */
          
  </style>

  0

Please sign in to leave a comment.