Добавление видео из 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-рассылки, повышают эффективность своих продаж, а мы получаем от них лучи добра и радости от пользования сервисом.