|
Адаптация iframe в Youtube при помощи jQuery
|
|
| Kosten | Четверг, 03 Октября 2019, 13:40 | Сообщение 1 |
| Понять не могу, что ранее было при проверки все нормально, а точнее если в каталоге файлов размещал видео, и потом ссылку отправлял веб мастер, то показывало все отлично. Но сейчас на томже материале отправляю ссылку на статью, которое сожержет видео, то мне выдает уже вебмастеров от Google уже по другому.
Если адаптировать, то нужно под DIV плеер ставить. Также попробовал с помощью jQuery. Где видео автоматически по ширине установилось, но проверяя материал, то опять выдает URL доступен Google, но есть проблемы, что вообще понять не могу.
Код <script type="text/javascript">
jQuery(document).find('iframe[src*="youtube.com"]').each(function() {
var video = jQuery(this);
video.attr( 'width', '100%' );
var video_width = video.width( );
video.css('height', video_width * 0.6, 'important');
});
</script>
Проверял по размеру, если его в материале, это плеер ставить на небольшой размер по ширине, то только после этого нет ошибки.
Как то можно стилями вывести, где не применяя DIV с классом?
Как пример, этот материал корректно показывал при проверке веб мастере гугл, а сейчас выдает ошибку.
| | Страна: (RU) |
| |
| Kosten | Четверг, 03 Октября 2019, 14:14 | Сообщение 2 |
|
| Также этот скрипт проверял, что тоже почему то не сработал.
Для определенной ширины экрана
Возможно вы хотите, чтобы скрипт отрабатывал не всегда, а только лишь для устройств, чья ширина меньше чем 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> | | Страна: (RU) |
| |
| Kosten | Четверг, 03 Октября 2019, 14:29 | Сообщение 3 |
|
| Ставил в низ сайта скрипты, чтоб по всему сайту был обхват, и при проверке не корректно показывало. Здесь решил поставить вид материала и комментариев на файле, где плееры расположены, это ставим перед закрывающемся /body этот скрипт, и при проверке все показывает отлично.
Код <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>
Также сразу второй скрипт с заданной шириной проверил, что если по месту устанавливать а не вверх или вниз сайта, то работает.
Вот только стоит еще один скрипт оставлять, если плееров не так много в материале?
| | Страна: (RU) |
| |
| Kosten | Четверг, 03 Октября 2019, 15:28 | Сообщение 4 |
|
| Существует множество способов отображения видео на вашем сайте. Возможно, вы самостоятельно размещаете видео и представляете его с помощью тега video на HTML5 . Возможно, вы используете YouTube или Vimeo, который предоставляет код iframe для отображения видео. Возможно, вы используете Viddler или другие видео хостинг, которые предоставляют вложенные теги объекта под встраивание для отображения проигрывателя Flash.
К счастью, здесь есть несколько возможных решений. Один из них был впервые предложен Тьерри Кобленцем и представлен в A List Apart в 2009 году. Это создание внутренних соотношений для видео. Используя эту технику, вы оборачиваете видео в другой элемент с внутренним соотношением сторон, а затем размещаете видео в этом абсолютном положении. Это дает нам ширину жидкости с разумной высотой, на которую мы можем рассчитывать.
Код <div class="videoWrapper">
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
CSS
Код .videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Вышеприведенная техника удивительна, но имеет несколько возможных ограничений:
1. Для этого требуется элемент-обертка, поэтому отсутствует прямой код копирования и вставки с YouTube.
2. Если у вас есть устаревший контент, где вы планируете сделать его более плавным, то все старые видео нуждаются в корректировке HTML.
2. Все видео должны иметь одинаковое соотношение сторон. В противном случае они будут переведены в другое соотношение сторон. Или вам понадобится набор инструментов с именами классов, которые вы можете применить для его настройки, что является дополнительным осложнением.
| | Страна: (RU) |
| |
| Kosten | Четверг, 03 Октября 2019, 22:45 | Сообщение 5 |
|
| Также для Youtube видео и Vimeo Video написана статья, как можно эти плееры на CSS адаптировать. Но здесь также нужно div ставить с классом, а в него выставлять код плеера.
| | Страна: (RU) |
| |
