Creating the trailer videos slideshow screen

Let's now create the final screen of our application, which displays a slideshow of the movie trailers, which are videos hosted on YouTube. We are using the Kendo UI Mobile ScrollView widget for this purpose.

In this view, video links and movie names are received from the service and the video links are added to an <iframe> element defined in a Kendo UI template.

HTML

Let's open up the Trailers.html file, which we created in Chapter 2, Building Your First Mobile Application, and add the following HTML:

<div data-role="view" data-title="Trailers"
     data-show="MovieTickets.trailers.show"
     data-layout="mt-main-layout" id="mt-trailers-view">
    <div id="mt-trailer-scrollview" data-role="scrollview">     
        
    </div>
    <!-- In order for the pages to be rendered properly
          make sure that you don't leave empty spaces
         between template's script tags and the html contents.
    -->
     <script...