Техподдержка сайтов
+7 (904) 589-06-04
+7 (904) 589-06-04
s.golikov1
telegram @sng24
info@sng-it.ru
Сайт программиста 1С Битрикс
Сайт программиста
1C Битрикс
(создание и поддержка сайтов)
О себе
Услуги
  • Перевод сайта на https
  • Создание сайтов
  • Интеграция сайта с 1С
  • Выгрузка товаров в Яндекс.Маркет
  • Композитный сайт
  • Внутренняя оптимизация сайта
  • Доработка сайтов
  • Импорт каталога из файла поставщика
  • Перенос сайта на 1С Битрикс
  • Парсинг контента
  • Установка готового сайта
  • Купить лицензию 1С Битрикс
  • Битрикс 24
  • Настройка служб доставки
  • Интеграция с соцсетями
  • Заказ на Маркете
  • Сопровождение сайтов на 1С Битрикс
  • Поиск и удаление вирусов
  • Настройка платежных систем
  • Выгрузка товаров на Hotline
Портфолио
Готовые сайты
  • Недвижимость
  • Медицина
  • Ресторанный бизнес
  • Автомобили и автозапчасти
  • Бухгалтерские и юридические услуги
  • Государство
  • Детские товары
  • Красота и здоровье
  • Мебель, интерьер, декор
  • Образование
  • Одежда и обувь
  • Подарки и сувениры
  • Продукты питания
  • Спорт, туризм и отдых
  • Строительство, ремонт, инструменты
  • Товары для животных
  • ТСЖ, ЖСК
  • Украшения, аксессуары, подарки
  • Электроника и бытовая техника
  • Универсальные
  • Разное
1С Битрикс
  • Старт (6 200 ₽)
  • Стандарт (17 900 ₽)
  • Малый бизнес (40 900 ₽)
  • Бизнес (83 900 ₽)
  • Интернет-магазин + CRM (109 000 ₽)
  • Продление лицензии
  • Сравнить редакции
CRM
  • Битрикс24
Контакты
Ещё
    Сайт программиста 1С Битрикс
    Сайт программиста
    1C Битрикс
    О себе
    Услуги
    Портфолио
    Готовые сайты
    1С Битрикс
    CRM
    Контакты
    Сайт программиста 1С Битрикс
    Сайт программиста
    1C Битрикс
    • Главная
    • О себе
    • Услуги
      • Назад
      • Услуги
      • Перевод сайта на https
      • Создание сайтов
      • Интеграция сайта с 1С
      • Выгрузка товаров в Яндекс.Маркет
      • Композитный сайт
      • Внутренняя оптимизация сайта
      • Доработка сайтов
      • Импорт каталога из файла поставщика
      • Перенос сайта на 1С Битрикс
      • Парсинг контента
      • Установка готового сайта
      • Купить лицензию 1С Битрикс
      • Битрикс 24
      • Настройка служб доставки
      • Интеграция с соцсетями
      • Заказ на Маркете
      • Сопровождение сайтов на 1С Битрикс
      • Поиск и удаление вирусов
      • Настройка платежных систем
      • Выгрузка товаров на Hotline
    • Портфолио
    • Готовые сайты
      • Назад
      • Готовые сайты
      • Недвижимость
      • Медицина
      • Ресторанный бизнес
      • Автомобили и автозапчасти
      • Бухгалтерские и юридические услуги
      • Государство
      • Детские товары
      • Красота и здоровье
      • Мебель, интерьер, декор
      • Образование
      • Одежда и обувь
      • Подарки и сувениры
      • Продукты питания
      • Спорт, туризм и отдых
      • Строительство, ремонт, инструменты
      • Товары для животных
      • ТСЖ, ЖСК
      • Украшения, аксессуары, подарки
      • Электроника и бытовая техника
      • Универсальные
      • Разное
    • 1С Битрикс
      • Назад
      • 1С Битрикс
      • Старт (6 200 ₽)
      • Стандарт (17 900 ₽)
      • Малый бизнес (40 900 ₽)
      • Бизнес (83 900 ₽)
      • Интернет-магазин + CRM (109 000 ₽)
      • Продление лицензии
      • Сравнить редакции
    • CRM
    • Контакты
    • Личный кабинет
    • +7 (904) 589-06-04
    Будьте на связи
    info@sng-it.ru
    • Вконтакте
    • YouTube

    Показ изображения вместо плагина видео youtube

    • Главная
    • ❶ Блог
    • ❷ Показ изображения вместо плагина видео youtube

    При оптимизации сайта желательно исключить все внешние скрипты или сделать их отложенными.
    Видео с youtube можно подгружать по нажатию на ссылку. В этой статье я покажу, как вместо iframe отобразить картинку с youtube, а при клике на картинку начинать показ видео.

    На сайте ссылка на видео хранится в свойстве 'YOUTUBE' : https://www.youtube.com/embed/LKmk4oinPvQ

    Если свойство 'YOUTUBE_SCRIN', где должна лежать картинка видео, пустое, то получим его с youtube и сохраним в свойство. Если же, свойство установлено, то отобразим картинку.

    
    // $arResult['PROPERTIES']['YOUTUBE']['VALUE'] = https://www.youtube.com/embed/LKmk4oinPvQ;
    //
    $srcY=preg_replace("#https:\/\/www\.youtube\.com\/embed\/#","",$arResult['PROPERTIES']['YOUTUBE']['VALUE']);
    if(!empty($arResult['PROPERTIES']['YOUTUBE_SCRIN']['VALUE']))
    {												
    	$arPhotoSmall = CFile::ResizeImageGet(
    		$arResult['PROPERTIES']['YOUTUBE_SCRIN']['VALUE'], 
    		array('width'=>450,'height'=>285), 
    		BX_RESIZE_IMAGE_EXACT,
    		Array()
    		);
    	?>
    	<div class="youtube-block" data-code="<?=$srcY;?>" >
    	<img src="<?=$arPhotoSmall['src']?>" />
    <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>
    </div>
    												
    	<?
    	}
    	else
    	{
    		$YOUTUBE_SCRIN = CFile::MakeFileArray("https://img.youtube.com/vi/".$srcY."/hqdefault.jpg");
    
    		if (!empty($YOUTUBE_SCRIN)) {
    			CIBlockElement::SetPropertyValuesEx($arResult['ID'], 2, array('YOUTUBE_SCRIN' => $YOUTUBE_SCRIN));
    		}
    		?>
    			<div class="youtube-block" data-code="<?=$srcY;?>">
    			<img src="<?=$arPhotoSmall['src']?>" />
    <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg>
    			</div>
    
    		<?
    	}
    
    

    Теперь с помощью js настроим событие 'click', но нажатию на картинку, в блок будет устанавливаться iframe.

    
    
    $(document).ready(function () {
    		$(document).on('click', '.youtube-block', function () {	
    
    			$(".youtube-block").html('<iframe height="285" src="https://www.youtube.com/embed/'+$(this).data('code')+'?autoplay=1&mute=1&autohide=1&border=0&wmode=opaque&enablejsapi=1" style="border:none;width: 100%" allowfullscreen></iframe>');
    
    		});	
    });	
    
    
    

    Стили для блока:

    
    
    .youtube-block{position:relative;width:100%;height:auto; text-align:center;cursor:pointer;}
    .youtube-block svg{position: absolute;
        top: 50%;
        left: 50%;
        width: 68px;
        height: 48px;
        margin-top: -24px;
        margin-left: -34px;} 
    .youtube-block:hover .ytp-large-play-button-bg{fill: #f00}		
    .ytp-large-play-button-bg {
        -webkit-transition: fill .1s cubic-bezier(0.4,0,1,1),fill-opacity .1s cubic-bezier(0.4,0,1,1);
        transition: fill .1s cubic-bezier(0.4,0,1,1),fill-opacity .1s cubic-bezier(0.4,0,1,1);
        fill: #212121;
        fill-opacity: .8;
    }
    
    
    

    Пример реализации: Обучающее видео "Установка CMS 1С Битрикс на хостинге Timeweb"


    10.12.2021

    Семен Голиков.


    Получите консультацию специалиста
    Семен Голиков
    Семен Голиков
    telegram @sng24
    Cертифицированный программист 1С Битрикс

    У меня Вы можете заказать программные работы или проконсультироваться по сайту.

    C 2010 года разрабатываю и поддерживаю сайты на 1С Битрикс. Являюсь Золотым партнером компании 1С Битрикс и имею компетенции: Интеграция с 1С, Композитный сайт, Битрикс24, а также все сертификаты специалиста.

    Золотой партнер компании 1С Битрикс Компетенция партнера - Интеграция с 1С Компетенция партнера - Композитный сайт Компетенция партнера - Битрикс 24 Участник программы качества внедрений


    info@sng-it.ru
    +7 (904) 589-06-04

    Поделиться:
    Назад к списку
    • Услуги
    • Перевод сайта на https
    • Выгрузка товаров в Яндекс.Маркет
    • Интеграция сайта с 1С
    • Создание сайтов
    • Композитный сайт
    • Внутренняя оптимизация сайта
    • Доработка сайтов
    • Импорт каталога из файла поставщика
    • Парсинг контента
    • Перенос сайта на 1С Битрикс
    • Установка готового сайта
    • Купить лицензию 1С Битрикс
    • Битрикс 24
    • Заказ на Маркете
    • Интеграция с соцсетями
    • Настройка служб доставки
    • Поиск и удаление вирусов
    • Сопровождение сайтов на 1С Битрикс
    • Настройка платежных систем
    • Выгрузка товаров на Hotline

    Аудит сайта
    Записаться на техподдержку
    Читайте также
    Как перенести видео с Youtube на Rutube или Vkontakte Как перенести видео с Youtube на Rutube или Vkontakte Проблема регистрации ботов на сайте Проблема регистрации ботов на сайте Подключаем Jivo Chat на сайт Подключаем Jivo Chat на сайт Модифицируем фасету для ускорения умного фильтра Модифицируем фасету для ускорения умного фильтра Кастомизируем календарь в битриксе Кастомизируем календарь в битриксе

    © 2010-2025 Сайт битрикс программиста Семена Голикова.

    Отправляя любую форму на сайте, вы соглашаетесь с политика в отношении обработки персональных данных данного сайта.
    - карта сайта
    Главное
    Информация
    Помощь
    • О себе
    • Услуги
    • Готовые сайты
    • Портфолио
    • Купить лицензию 1С Битрикс
    • Битрикс24
    • Контакты
    • Акции
    • Видеоуроки
    • Блог
    • Новости интернета
    • Про интеграцию с 1С
    • Внутренняя оптимизация сайта
    • Сниппеты
    • Хостинг для битрикс
    • Партнерам
    • Отзывы
    • Техподдержка
    +7 (904) 589-06-04
    - позвонить в WhatsApp
    Социальные сети:
    - карта сайта © 2010-2025 Сайт битрикс программиста Семена Голикова.
    Отправляя любую форму на сайте, вы соглашаетесь с политика в отношении обработки персональных данных данного сайта.
    Спасибо за заявку!
    Мы свяжемся с Вами в ближайшее
    время и ответим на все вопросы.