Video youtube ne s'affiche dans la version mobile

Bonsoir,

je suis en train de développer un site web et j'ai besoin d'afficher un vidéo youtube, il s'affiche bien dans la version meduim et sm mais dans la version mobile il ne s'affiche pas :

<div class="col-md-6 col-sm-6 col-xs-12 ">
		         <div class="videowrapper well hidden-xs">
				<iframe height="300" width="500" src="https://www.youtube.com/LELIEN" frameborder="0" allowfullscreen=""></iframe>
								
			   </div>
			</div>

pour le css :

.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
}
.videowrapper iframe, 
.videowrapper object,
.videowrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Un coup de main SVP

Merci d'avance
Modifié par withColors (22 Oct 2014 - 21:53)

Bonjour,

Essaye d'aller voir ce tutoriel sur grafikart.fr. Il est assez bien expliqué.

Pour développer un site en responsive, les videos de type embed (youtube, vimeo, dailymotion…) ne se redimensionne pas.
Pour remedier à cela , il suffit d'ajouter un peu de CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Si vous avez besoin d’une taille fixe et elastic ajouté :

.video-wrapper {
	width: 600px;
	max-width: 100%;
}