diff --git a/searx/engines/vimeo.py b/searx/engines/vimeo.py
index 52c89ffdd..35bc3d50a 100644
--- a/searx/engines/vimeo.py
+++ b/searx/engines/vimeo.py
@@ -35,7 +35,11 @@ def response(resp):
for result in dom.xpath(results_xpath):
url = base_url + result.xpath(url_xpath)[0]
title = p.unescape(extract_text(result.xpath(title_xpath)))
- content = ' '.format(url, title, extract_text(result.xpath(content_xpath)[0]))
- results.append({'url': url, 'title': title, 'content': content})
-
+ thumbnail = extract_text(result.xpath(content_xpath)[0])
+ content = ' '.format(url, title, thumbnail)
+ results.append({'url': url
+ , 'title': title
+ , 'content': content
+ , 'template':'videos.html'
+ , 'thumbnail': thumbnail})
return results
diff --git a/searx/engines/youtube.py b/searx/engines/youtube.py
index 1331f480e..cefdb6536 100644
--- a/searx/engines/youtube.py
+++ b/searx/engines/youtube.py
@@ -26,14 +26,21 @@ def response(resp):
url = url[:-1]
title = result['title']['$t']
content = ''
+
+ thumbnail = ''
if len(result['media$group']['media$thumbnail']):
- content += ''.format(url, result['media$group']['media$thumbnail'][0]['url'])
+ thumbnail = result['media$group']['media$thumbnail'][0]['url']
+ content += ''.format(url, thumbnail)
if len(content):
content += '
' + result['content']['$t']
else:
content = result['content']['$t']
- results.append({'url': url, 'title': title, 'content': content})
+ results.append({'url': url
+ , 'title': title
+ , 'content': content
+ , 'template':'videos.html'
+ , 'thumbnail':thumbnail})
return results
diff --git a/searx/static/css/style.css b/searx/static/css/style.css
index 2e6f450e1..90db60d6b 100644
--- a/searx/static/css/style.css
+++ b/searx/static/css/style.css
@@ -70,6 +70,7 @@ a { text-decoration: none; color: #1a11be; }
a:visited { color: #7b11be; }
.result { margin: 19px 0 18px 0; padding: 0; max-width: 55em; clear: both; }
+.result:hover { background: #e8e7e6; }
.result_title { margin-bottom: 0; }
.result h3 { font-size: 1em; word-wrap:break-word; margin: 5px 0 1px 0; padding: 0 }
.result .content { font-size: 0.8em; margin: 0; padding: 0; max-width: 54em; word-wrap:break-word; line-height: 1.24; }
@@ -143,6 +144,13 @@ tr:hover td { background: #DDDDDD; }
#result_count { font-size: 0.8em; margin: 2px 0 2px 0; padding: 0 }
+#fr { padding: 2px 6px;
+display: inline-block;
+background: #ECF0F1;
+border-radius: 4px;
+border: 1px solid #3498DB;;
+width:55em;}
+
#suggestions { position: absolute; left: 54em; width: 12em; margin: 0 2px 5px 5px; padding: 0 2px 2px 2px; }
#suggestions span { display: block; font-size: 0.8em; margin: 0 2px 10px 2px; padding: 0; }
#suggestions form { display: block; }
diff --git a/searx/templates/result_templates/videos.html b/searx/templates/result_templates/videos.html
new file mode 100644
index 000000000..97c966e43
--- /dev/null
+++ b/searx/templates/result_templates/videos.html
@@ -0,0 +1,7 @@
+