Техподдержка сайтов
+7 (904) 589-06-04
+7 (904) 589-06-04
s.golikov1
info@sng-it.ru
Сайт программиста 1С Битрикс
Сайт программиста
1C Битрикс
(создание и поддержка сайтов)
О себе
Услуги
  • Перевод сайта на https
  • Создание сайтов
  • Интеграция сайта с 1С
  • Выгрузка товаров в Яндекс.Маркет
  • Композитный сайт
  • Внутренняя оптимизация сайта
  • Доработка сайтов
  • Импорт каталога из файла поставщика
  • Перенос сайта на 1С Битрикс
  • Парсинг контента
  • Установка готового сайта
  • Купить лицензию 1С Битрикс
  • Битрикс 24
  • Настройка служб доставки
  • Интеграция с соцсетями
  • Заказ на Маркете
  • Сопровождение сайтов на 1С Битрикс
  • Поиск и удаление вирусов
  • Настройка платежных систем
  • Выгрузка товаров на Hotline
Портфолио
Готовые сайты
  • B2B
  • Автомобили и автозапчасти
  • Бухгалтерские и юридические услуги
  • Государство
  • Детские товары
  • Красота и здоровье
  • Мебель, интерьер, декор
  • Медицина
  • Мобильные приложения
  • Недвижимость
  • Образование
  • Одежда и обувь
  • Подарки и сувениры
  • Продукты питания
  • Ресторанный бизнес
  • Спорт, туризм и отдых
  • Строительство, ремонт, инструменты
  • Товары для животных
  • ТСЖ, ЖСК
  • Украшения, аксессуары, подарки
  • Универсальные
  • Электроника и бытовая техника
  • Разное
1С Битрикс
  • Старт (5 400 ₽)
  • Стандарт (15 900 ₽)
  • Малый бизнес (35 900 ₽)
  • Бизнес (72 900 ₽)
  • Интернет-магазин + CRM (99 000 ₽)
  • Продление лицензии
  • Сравнить редакции
CRM
  • Битрикс24
Контакты
Ещё
    Сайт программиста 1С Битрикс
    Сайт программиста
    1C Битрикс
    О себе
    Услуги
    • Перевод сайта на https
    • Создание сайтов
    • Интеграция сайта с 1С
    • Выгрузка товаров в Яндекс.Маркет
    • Композитный сайт
    • Внутренняя оптимизация сайта
    • Доработка сайтов
    • Импорт каталога из файла поставщика
    • Перенос сайта на 1С Битрикс
    • Парсинг контента
    • Установка готового сайта
    • Купить лицензию 1С Битрикс
    • Битрикс 24
    • Настройка служб доставки
    • Интеграция с соцсетями
    • Заказ на Маркете
    • Сопровождение сайтов на 1С Битрикс
    • Поиск и удаление вирусов
    • Настройка платежных систем
    • Выгрузка товаров на Hotline
    Портфолио
    Готовые сайты
    • B2B
    • Автомобили и автозапчасти
    • Бухгалтерские и юридические услуги
    • Государство
    • Детские товары
    • Красота и здоровье
    • Мебель, интерьер, декор
    • Медицина
    • Мобильные приложения
    • Недвижимость
    • Образование
    • Одежда и обувь
    • Подарки и сувениры
    • Продукты питания
    • Ресторанный бизнес
    • Спорт, туризм и отдых
    • Строительство, ремонт, инструменты
    • Товары для животных
    • ТСЖ, ЖСК
    • Украшения, аксессуары, подарки
    • Универсальные
    • Электроника и бытовая техника
    • Разное
    1С Битрикс
    • Старт (5 400 ₽)
    • Стандарт (15 900 ₽)
    • Малый бизнес (35 900 ₽)
    • Бизнес (72 900 ₽)
    • Интернет-магазин + CRM (99 000 ₽)
    • Продление лицензии
    • Сравнить редакции
    CRM
    • Битрикс24
    Контакты
    Ещё
      Сайт программиста 1С Битрикс
      Сайт программиста
      1C Битрикс
      • Главная
      • О себе
      • Услуги
        • Назад
        • Услуги
        • Перевод сайта на https
        • Создание сайтов
        • Интеграция сайта с 1С
        • Выгрузка товаров в Яндекс.Маркет
        • Композитный сайт
        • Внутренняя оптимизация сайта
        • Доработка сайтов
        • Импорт каталога из файла поставщика
        • Перенос сайта на 1С Битрикс
        • Парсинг контента
        • Установка готового сайта
        • Купить лицензию 1С Битрикс
        • Битрикс 24
        • Настройка служб доставки
        • Интеграция с соцсетями
        • Заказ на Маркете
        • Сопровождение сайтов на 1С Битрикс
        • Поиск и удаление вирусов
        • Настройка платежных систем
        • Выгрузка товаров на Hotline
      • Портфолио
      • Готовые сайты
        • Назад
        • Готовые сайты
        • B2B
        • Автомобили и автозапчасти
        • Бухгалтерские и юридические услуги
        • Государство
        • Детские товары
        • Красота и здоровье
        • Мебель, интерьер, декор
        • Медицина
        • Мобильные приложения
        • Недвижимость
        • Образование
        • Одежда и обувь
        • Подарки и сувениры
        • Продукты питания
        • Ресторанный бизнес
        • Спорт, туризм и отдых
        • Строительство, ремонт, инструменты
        • Товары для животных
        • ТСЖ, ЖСК
        • Украшения, аксессуары, подарки
        • Универсальные
        • Электроника и бытовая техника
        • Разное
      • 1С Битрикс
        • Назад
        • 1С Битрикс
        • Старт (5 400 ₽)
        • Стандарт (15 900 ₽)
        • Малый бизнес (35 900 ₽)
        • Бизнес (72 900 ₽)
        • Интернет-магазин + CRM (99 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"


      09.12.2021

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


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

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

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

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


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

      Поделиться:
      Назад к списку
      • Услуги
      • Услуги
      • Блог
      • Видеоуроки
      • Скидки на 1C Битрикс
      • Новости интернета
      • Снипеты

      Аудит сайта

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

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