Проблема плеера в том что у него нефиксированные размеры, поэтому возникают трудности на адаптивных сайтах. Ширину можно задать в 100%, а высоту нет, поэтому получаются вытянутый плеер на большом экране или высокий на узком экране. Если ширина задана в пикселях то на мобильных, плеер выходит за границы сайта.
Сделать видео нормального размера на всех экранах можно сделать, обвернув <iframe> дивом с определёнными CSS-стилями.
<div class="iframe_video">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/..."></iframe>
</div>.iframe_video {
height: 0px;
padding-bottom: 56.2%;
position: relative;
}
.iframe_video iframe {
width: 100%;
height: 100%;
position: absolute;
}Если вставок видео на сайте много, то добавить <div class=""> можно с помощью JQuery:
$(document).ready(function(){
$('iframe[src*="youtu"]').each(function(){
$(this).wrap('<div class="iframe_video"></div>');
});
});
