Техподдержка сайтов
+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
Портфолио
Готовые сайты
  • Недвижимость
  • Медицина
  • Ресторанный бизнес
  • Автомобили и автозапчасти
  • Бухгалтерские и юридические услуги
  • Государство
  • Детские товары
  • Красота и здоровье
  • Мебель, интерьер, декор
  • Образование
  • Одежда и обувь
  • Подарки и сувениры
  • Продукты питания
  • Спорт, туризм и отдых
  • Строительство, ремонт, инструменты
  • Товары для животных
  • ТСЖ, ЖСК
  • Украшения, аксессуары, подарки
  • Электроника и бытовая техника
  • Универсальные
  • Разное
1С Битрикс
  • Старт (6 200 ₽)
  • Стандарт (17 900 ₽)
  • Малый бизнес (40 900 ₽)
  • Бизнес (83 900 ₽)
  • Интернет-магазин + CRM (99 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 (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"


    10.12.2021

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


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

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

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

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


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

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

    Аудит сайта
    Записаться на техподдержку
    Читайте также
    Кастомизируем календарь в битриксе Кастомизируем календарь в битриксе Внедряем Турбо-страницы Яндекса для мобильных устройств Внедряем Турбо-страницы Яндекса для мобильных устройств Перевод таблиц базы данных c MyISAM на InnoDB Перевод таблиц базы данных c MyISAM на InnoDB Удобный подбор домена Удобный подбор домена Делаем captcha "Я не робот" Делаем captcha "Я не робот"

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

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