← Desenvolvimento

Video responsivo - Iframe youtube...

Lida 3727 vezes

Offline

Consultor 
Membro
Mensagens 812 Gostos 10
Feedback +21

Troféus totais: 24
Trófeus: (Ver todos)
Level 5 Windows User Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1

Boas ,

Coloquei este código CSS que vi na net:

Código: [Seleccione]
table {
    border-collapse: collapse;
    border-spacing: 0;
}
figure { width: 90%; min-width: 17.5em; margin:0 auto;}
figcaption { font: 120% sans-serif; text-align: center;}
.boxVideo {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    margin:0 auto;
}
.boxVideo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

E no index coloquei isto:
Código: [Seleccione]
<figure>
    <div class="boxVideo">
           <iframe width="420" height="315" src="https://www.youtube.com/embed/XXXXXXX?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
    </div>
<figcaption>XXXXXX</figcaption>
</figure>


Já coloquei um tópico a pedir quem faça isto, mas como tenho urgência nesta correção, se alguém puder dizer onde tou a errar agradeço ;)

Cumps
Offline

Consultor 
Membro
Mensagens 812 Gostos 10
Feedback +21

Troféus totais: 24
Trófeus: (Ver todos)
Level 5 Windows User Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1

Em principio ficou resolvido, se alguém precisar deixo aqui o código que resultou...

Código: [Seleccione]
    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/11712103' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>