ProjectGate Iframe Integration Options

Para incorporar o projeto ProjectGate em seu site, escolha uma das opções abaixo e substitua "SEU_SITE.com" pelo domínio onde o ProjectGate está hospedado.

1. Iframe Básico Simples

<iframe src="https://SEU_SITE.com" width="100%" height="600px" frameborder="0" scrolling="auto" allowfullscreen></iframe>

2. Iframe Responsivo (proporção 16:9)

<style>
  .responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<div class="responsive-iframe-container">
  <iframe src="https://SEU_SITE.com" frameborder="0" scrolling="auto" allowfullscreen></iframe>
</div>

3. Iframe com Mensagem de Fallback

<iframe 
  src="https://SEU_SITE.com" 
  width="100%" 
  height="600px" 
  frameborder="0" 
  scrolling="auto" 
  allowfullscreen
  title="ProjectGate Platform">
  <p>Seu navegador não suporta iframes. Acesse <a href="https://SEU_SITE.com">ProjectGate</a> diretamente.</p>
</iframe>

Dicas Adicionais:

Para melhor experiência em dispositivos móveis:

@media (max-width: 768px) {
  iframe {
    height: 400px; /* Altura reduzida para mobile */
  }
}

Para permitir comunicação entre o iframe e a página pai:

<iframe src="https://SEU_SITE.com" allow="camera; microphone; fullscreen; payment" width="100%" height="600px"></iframe>