Видео на nature-photographing

#video
	RewriteRule ^video/([0-9]+)-(.*)/?$ /video/index.php?id=$1&url=$2 [L,QSA]
	RewriteRule ^video/(.*)/([0-9]+)-(.*)/?$ /video/index.php?id=$2&url=$3 [L,QSA]

В папку /var/www/naturephoto/data/www/nature-photographing.com/video/sql_utility/1-insert заливаем файл с заголовками видео, собранных при помощи кейколлектор, и почищенные от слов с плохой частотностью.

Берем данные отсюда https://docs.google.com/spreadsheets/d/1BQi1ZlfUojElNs9qWRQRWq3bV4x0EfqT... (собранные в кейколлектор для заголовков, взятых с сайта zverevedia.ru) и из ключей сайта natgeotv.com взятого из seopult, после этого вычищенный список от всех слов не содержащих «видео».

nature-photographing.com/video/sql_utility/one-insert/insert-title.php
Получаем файл gorod_video.sql

Экспортируем записи в БД:

mysql -uroot -pVMHm2WAW -f all_video < /var/www/naturephoto/data/www/nature-photographing.com/video/sql_utility/one-insert/gorod_video.sql

//require 'shapka_header.php';

и

//require 'shapka_body.php';
require 'shapka_invtur.php';

И подправляем highslide_header.php

Это видно из ошибки:

GET https://www.googleapis.com/youtube/v3/search?part=snippet&q=%D0%BF%D1%83%D1…0%B4%D0%B5%D0%BE&maxResults=15&key=AIzaSyCXOUOSt2I1DrcyVG_mT0GsZzuoyOgh5DI 403 (OK)m.ajaxTransport.send @ jquery.min.js:4m.extend.ajax @ jquery.min.js:4searchVideo @ search.js:11(anonymous function) @ (index):158m.event.dispatch @ jquery.min.js:3m.event.add.r.handle @ jquery.min.js:3m.event.trigger @ jquery.min.js:3(anonymous function) @ jquery.min.js:3m.extend.each @ jquery.min.js:2m.fn.m.each @ jquery.min.js:2m.fn.extend.trigger @ jquery.min.js:3(anonymous function) @ (index):169m.Callbacks.j @ jquery.min.js:2m.Callbacks.k.fireWith @ jquery.min.js:2m.extend.ready @ jquery.min.js:2J @ jquery.min.js:2
dostopr_2_photo_album-adaptiv-hits.php?E=49.94722&N=24.07417&radius=100&num=99:17 Uncaught SecurityError: Blocked a frame with origin "http://galleryua.com" from accessing a frame with origin "http://nature-photographing.com". Protocols, domains, and ports must match.

Заходим https://console.developers.google.com/project

Названия добавляем в скрипте script.js:

videoSet += printVideo(data.items[item].id.videoId,data.items[item].snippet.thumbnails.medium.url, data.items[item].snippet.title,data.items[item].snippet.description,data.items[item].snippet.publishedAt);

Функцию добавления блока с очередным видео заменяем так:

var printVideo = function(id,pic,title,description,publishedAt){//,height,width
			
			if(!id)return console.log("ID видео не найдено");
			//if(!nameNumber)nameNumber = '';
			//if(!height)height = 315;
			//if(!width)width = 420;
			
			var videoCont = '<a class="fancybox fancybox.iframe" rel="group" href="http://www.youtube.com/embed/'+id+'?autoplay=1"><img src="../play.jpg" alt="" class="play"><img src="'+pic+'" alt="'+title+'('+description+', '+publishedAt+')"><br><p><center>'+title+'</center></p></a>';//
			return videoCont;
		}

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

Решается проблема очень просто

В свойствах #search-container a нужно указать высоту height: 250px:

#search-container a{
		    #width:30%;
			#margin:20px 10px 0px;
			width: 31.30%;
			margin: 1% 1%;
			float:left;
			position:relative;
			height: 250px;
		}

Еще можно задать свойство overflow: hidden на случай очень длинного названия:

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Синтаксис

Значения
visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden Отображается только область внутри элемента, остальное будет скрыто.
scroll Всегда добавляются полосы прокрутки.
auto Полосы прокрутки добавляются только при необходимости.
inherit Наследует значение родителя.

Добавляем эффект плавного затемнения при наведении курсора мыши на обложку видео:

#search-container a img:hover {
			opacity: 0.7;
			-moz-opacity: 0.7;
			filter: alpha(opacity=80) black;
			-khtml-opacity: 0.7;
			background-color: #000;
			}

Получаем такой эффект при наведении мыши

Наполняем страницу случайно сгенерированными фото
Для этого создан скрипт sql_utility/select_koord.php, который генерирует координаты из списка городов:

…
UPDATE `all_video`.`video_news` SET `E` = '35.5118', `N` = '24.6391' WHERE `id` ='10008' LIMIT 1;
UPDATE `all_video`.`video_news` SET `E` = '34.9893', `N` = '26.0657' WHERE `id` ='10009' LIMIT 1;
UPDATE `all_video`.`video_news` SET `E` = '35.014', `N` = '25.7913' WHERE `id` ='10010' LIMIT 1;
UPDATE `all_video`.`video_news` SET `E` = '35.463', `N` = '25.753' WHERE `id` ='10011' LIMIT 1;
…

Корректируем его следующим образом

И запускаем:

[root@176 ~]# mysql -uroot -p -f all_video < /var/www/naturephoto/data/www/nature-photographing.com/video/sql_utility/gorod_koord_rand.sql

Проблема float, как я ее назвал, выглядит так:

Решается она очень просто. Вставляется обнудяющий div, как сказал Сергей:

<div style="clear:both;height:0;line-height:0;display:block;float:none;padding:0;margin:0;border:none;"></div>

Теперь все выглядит нормально.