Простой скрипт, который адаптирует видео с Youtube и не только, для любых устройств и разрешений экрана.
Например, у вас есть такой iframe c Youtube.
Код
<iframe src="ссылка" width="700" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Обращаем внимание, что у него в width содержится значение 700px. Это значит что на меньших экранах вашего сайта видео будет уходить за рамки сайта или обрезаться. Красиво? Не думаю!!
Добавляем скрипт в конец сайта и вы увидите, что все станет хорошо.
Код
<script>
jQuery(document).find('iframe[src*="youtube.com"]').each(function() {
var td_video = jQuery(this);
td_video.attr('width', '100%');
var td_video_width = td_video.width();
td_video.css('height', td_video_width * 0.6, 'important');
});
</script>
Возможно кто-то захочет, чтобы скрипт отрабатывал не всегда, а только лишь для мобильных устройств, чья ширина меньше чем 480px. Тогда ставим так:
Код
<script>
if ( $(window).width() <= 480 ) {
jQuery(document).find('iframe[src*="youtube.com"]').each(function() {
var td_video = jQuery(this);
td_video.attr('width', '100%');
var td_video_width = td_video.width();
td_video.css('height', td_video_width * 0.6, 'important');
});
}
</script>