Merge pull request #363 from bsinno/feature/360_embedVideo

Included Vorto introduction video in website homepage. Fixes #360.

website/Avorto.md

@@ -5,12 +5,9 @@ title : "What is Vorto"
 series : "homepagetop"
 sequence: "1"
 order : "1"
-imagename : "WhatIsVorto.jpg"
-videourl: "https://youtu.be/PKwoMmxZdPU&width=1500&height=1000"
-videotitle : "Introduction to Vorto"
 animatestyle: "slideInRight"
-style: "thumb5"
 fadeduration: "4"
+playvideo: "yes"
 ---
 
 <b>Vorto</b> is an open source tool that allows to create and manage technology agnostic, abstract device descriptions, so called information models. Information models <b>describe</b> the attributes and the capabilities of real world devices. These information models can be managed and <b>shared</b> within the Vorto Information Model Repository. Code Generators for Information Models let you <b>integrate</b> devices into different platforms.

website/Cshare.md

@@ -10,6 +10,7 @@ videourl: "https://youtu.be/sFyGF7n_gbE&width=1500&height=1000"
 videotitle : "Share and Reuse Information model"
 animatestyle: "slideInRight"
 style: "thumb5"
+playvideo: "no"
 ---
 
 {% include base.html %}
@@ -18,4 +19,4 @@ With the Information Model Repository,  **Platform vendors** are able to manage,
 
 <a href="http://vorto.eclipse.org/repo" target="_blank">Information Model Repository</a>
 
-<a href ="{{base}}/documentation/vorto-repository/web-interface/share-web.html"> Find out more on how to Share Information Models
+<a href ="{{base}}/documentation/vorto-repository/web-interface/share-web.html"> Find out more on how to Share Information Models

website/_includes/homepagetop.html

@@ -4,14 +4,23 @@
   {% capture thecycle %}{% cycle 'odd', 'even' %}{% endcapture %}
   <div class="box">
     {% if thecycle == 'odd' %}
-    <img class="box-img img-responsive pull-right wow {{ main.animatestyle}} zoom1" src="{{ base }}/img/{{ main.imagename}}">
+    {% if main.playvideo == 'yes' %}
+      <video class="box-img img-responsive pull-right wow {{ main.animatestyle}}" width="500" height="500" controls autoplay><source src="{{base}}/video/vortointro.webm" type="video/webm"></video>
+          {% endif %}
+          {% if main.playvideo == 'no' %}
+          <img class="box-img img-responsive pull-right wow {{ main.animatestyle}} zoom1" src="{{ base }}/img/{{ main.imagename}}">
+            {% endif %}
+
        {% if main.videourl %}
        <div class="{{ main.style }}">
-      <a title="{{main.videotitle}}" data-rel="prettyPhoto" href="{{main.videourl}}" rel="prettyPhoto" > 
+      <a title="{{main.videotitle}}" data-rel="prettyPhoto" href="{{main.videourl}}" rel="prettyPhoto" >
           <i class="fa fa-play-circle fa-5 play-icon"></i>
-          </a> 
+          </a>
+        <!--  {% if main.playvideo== 'yes' %}
+        <video width="500" height="500" controls autoplay><source src="{{base}}/video/mov_bbb.mp4" type="video/mp4"></video>
+          {% endif %} -->
         </div>
-             
+
         {% endif %}
 
     {% else %}
@@ -29,7 +38,7 @@
     {% else %}
       <div class="wow {{ main.fadestyle}}">
 
-    {% endif %}     
+    {% endif %}
       <h2 class="box-headline" id="header{{main.sequence}}">{{ main.title}}</h2>
       <p>{{ main.content }}</p>
       </div>