Get started with Yottie 2.7.0

1. Upload yottie folder to your server. Add required files to your website.

There are two ways to do it:

The first one is adding single bundled file which automatically load all dependencies:

<!-- don't forget to set correct path -->
<script src="yottie/jquery.yottie.bundled.js"></script>

Another way is adding the whole files manually:

<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<script src="//apis.google.com/js/platform.js"></script>
<script src="//www.youtube.com/iframe_api"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.runtime.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>

<!-- don't forget to set correct path -->
<link href="yottie/jquery.yottie.min.css" rel="stylesheet">
<script src="yottie/jquery.yottie.min.js"></script>

2. Use the following tutorial to get YouTube API key: How to get YouTube API key.

3. Initialize the widget using data-yt-* attributes or as jQuery plugin.

Initialization using data-yt-* attributes

Add the widget's HTML code to the body section. Don't forget to specify your YouTube API key in the data-yt-key attribute.

<div data-yt
     data-yt-key="YOUR YOUTUBE API KEY"
     data-yt-channel="https://www.youtube.com/user/RockstarGames"
     data-yt-width="auto"
     data-yt-lang="en"
     data-yt-header-layout="accent"
     data-yt-content-columns="4"
     data-yt-content-rows="2"
     data-yt-video-layout="cinema">
</div>

Initialization as jQuery plugin

Don't forget to specify your YouTube API key in the key param.

<div class="my-yottie"></div>

<script>
    $('.my-yottie').yottie({
        key: 'YOUR YOUTUBE API KEY',
        channel: 'https://www.youtube.com/user/RockstarGames',
        width: 'auto',
        lang: 'en',
        header: {
            layout: 'accent'
        },
        content: {
            columns: 4,
            rows: 2
        },
        video: {
            layout: 'cinema'
        }
    });
</script>

Note: If you use the bundled version you have to initialize as jquery plugin the following way:

<script>
    window.onYottieReady = function() {
        $('.my-yottie').yottie({
            key: 'YOUR YOUTUBE API KEY',
            channel: 'https://www.youtube.com/user/RockstarGames',
            width: 'auto',
            lang: 'en',
            header: {
                layout: 'accent'
            },
            content: {
                columns: 4,
                rows: 2
            },
            video: {
                layout: 'cinema'
            }
        });
    };
</script>