Добавление видео из Youtube в email-рассылку

Видео ворвалось в жизнь интернета внезапно и, не сказать, чтобы так давно. Однако, уже стало неотъемлемой частью жизни любого из нас. Видео стало инструментом бизнеса в продвижении товаров и услуг. На Youtube можно найти инструкции к товарам, промо-ролики, записи вебинаров итд. Размещение видео в email-рассылках — это очень толковый маркетинговый ход. По нашей статистике это на 17% повышает долю кликов в вашей рассылке (по сравнению с аналогичными без видео).

Но как это сделать в своем html-макете рассылки?

Вставлять видео из Youtube на веб-страницах просто — достаточно скопировать html-код с iframe и разместить его у себя. А вот с email-рассылкой такой финт не пройдет. И, хотя, email-рассылка тоже содержит html-макет вставить в него iframe нельзя по соображениям безопасности. Открываем Технические и административные требования для отправки электронных сообщений на Mail.Ru. Мы их используем, как основные на рынке рунета (в нашем трафике доля Mail составляет более 70%).

… при использовании HTML в ваших сообщениях, убедитесь что соблюдена валидная структура HTML-документа. Запрещено использовать потенциально опасные объекты, такие как ActiveX, JavaScript, VBScript, Java-апплеты, Frames и IFrames, подключаемые с внешних сайтов CSS, Meta Refresh и т.п. (использование таких элементов может привести к блокировке ваших рассылок);

К тому же, такие iframe зачастую будут просто некорректно отображаться почтовыми клиентами, программами или веб-сервисами. И, все-таки, как вставить видео в письмо? Сервис email-маркетинга Pechkin-mail.ru, как всегда, делает всю основную работу за вас.


Единственный эффективный способ — это размещение картинки с активной ссылкой на видео в виде скриншота вашего видео с кнопкой Play поверх него. Например, это может выглядеть вот так:



Действительно, просто и эффективно. Единственный минус — снимать вручную такой скриншот муторно и занимает некоторое время. Печкин предложил функцию для добавления видео в 2 клика: вы просто нажимаете на блок “Видео”, вставляете ссылку на него и нажимаете “Вставить”. После чего в создаваемом вами макете появится скриншот вашего видео с уже наложенной кнопкой Play и ссылкой на видео в Youtube.

Как это реализовано у нас?

Печкин всегда старается помочь разработчикам, если они сталкиваются с такими же вопросами, и поэтому сейчас расскажем об алгоритме:

1. Парсим ссылку из youtube, проверяя ее валидность, чтобы вытащить ID видео.
2. Берем скриншот из youtube в среднем качестве. Это может сделать элементарно по ссылке: img.youtube.com/vi/%YOUTUBE_ID%/hqdefault.jpg
3. Накладываем сверху изображение “apple-подобной” кнопки Play с помощью PHP-функции.
4. Выкладываем в облачное хранилище Selectel, получаем ссылку на изображение, вставляем ее в рассылку.
5. Радуем пользователя.

Вот пример функции на PHP, которая используется у нас:

/**
* Формируем скриншот из youtube с наложенной кнопкой play
*
* @param $youtube_id
  Id of youtube-video
  url, если это не youtube, а rutube или vimeo
*
* @return
*   Url скриншота (480х360px) на selectel или локальной машине, если что-то произошло при загрузке
*	OR FALSE if error
*/
function youtube_thumbnail_with_play($youtube_id,$url = '') {
	
	//А если у нас не youtube?
	if ($youtube_id === '0'){
		if(stripos($url,'rutube.ru') !== FALSE){
			preg_match("/http:\/\/rutube.ru\/video\/(\w+)\//",$url,$matches);
			$xml_info = simplexml_load_file("http://rutube.ru/cgi-bin/xmlapi.cgi?rt_mode=movie&rt_movie_id=".$matches[1]."&utf=1");
			if ($xml_info) {
				$thumbnail_url = (string) $xml_info->thumbnail_url;
			}
		}elseif(stripos($url,'vimeo.com') !== FALSE){
			if ((stripos($url,'https') !== FALSE)) {$vimeo_id = substr($url,18);} else {$vimeo_id = substr($url,17);}
			$xml_info = simplexml_load_file("http://vimeo.com/api/v2/video/$vimeo_id.xml");
			if ($xml_info) {
				$thumbnail_url = (string) $xml_info->video->thumbnail_large;
			}
		}else{
			return FALSE;
		}	
	}else{
		$thumbnail_url = 'http://img.youtube.com/vi/'.$youtube_id.'/hqdefault.jpg';
	}
	

	// Make sure the imagecopymerge() function exists (in GD image library).
	if (!function_exists('imagecopymerge')) {
		return FALSE;
	}
	
	$image = imagecreatefromjpeg($thumbnail_url);
	if (!$image) {return FALSE;}
	$image_size = getimagesize($thumbnail_url);
	
	// Calculate the proper coordinates for placing the play button in the middle.
	$destination_x = ($image_size[0] / 2) - 35;
	$destination_y = ($image_size[1] / 2) - 35;
	
	// Load the play button image.
	$play_button_image = imagecreatefrompng($root.'/images/play_button.png');
	imagealphablending($play_button_image, TRUE); // Preserve transparency.
	imagealphablending($image, TRUE); // Preserve transparency.
	
	// Use imagecopy() to place the play button over the image.
	imagecopy(
		$image, // Destination image.
		$play_button_image, // Source image.
		$destination_x, // Destination x coordinate.
		$destination_y, // Destination y coordinate.
		0, // Source x coordinate.
		0, // Source y coordinate.
		70, // Source width.
		70 // Source height.
	);
	if (is_dir($root.'/html/other/')===false){
		mkdir($root.'/html/other/');
	}
	$rand_path = $root.'/html/other/'.md5(time().rand(0,100000)).'.png';
	imagepng($image,$rand_path);
	
	$selectel_str = $wizard->cloud_upload($rand_path); //внутренняя функция загрузки файлов в облачное хранилище selectel
	if (strpos($selectel_str, 'http://static1.pechkin-mail.ru/') !== false) {unlink($rand_path);}
	
	imagedestroy($image);
	imagedestroy($play_button_image);
	
	return $selectel_str;
}

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