YOUTUBE VIDEO PLAYLİST EMBED CODE

YOUTUBE VIDEO PLAYLİST

</head>
<body>
<div id="example">
    <div class="demo-section k-content wide" style="max-width: 925px;">
        <div id="mediaplayer" style="height:360px">
</div>
<div class="k-list-container playlist">
<ul id="listView" class="k-list"></ul>
</div>
</div>
<script type="text/javascript">
        $(document).ready(function () {

$("#mediaplayer").kendoMediaPlayer({
                autoPlay: true
            });

var videos = new kendo.data.DataSource({
                data: [{
                    title: "trt 1",
                    poster: "",
                    source: "https://trtcanlitv-lh.akamaihd.net/i/TRT1HD_1@181842/master.m3u8"
                },
                {
                    title: "Build HIPAA-Compliant Healthcare Apps Fast",
                    poster: "",
                    source: "https://www.youtube.com/watch?v=dyvxivS5EcI"
                },
                {
                    title: "ProgressNEXT 2018 Highlights",
                    poster: "",
                    source: "https://www.youtube.com/watch?v=Gp7tcOcSKAU"
                },
                {
                    title: "Kendo UI Testimonial",
                    poster: "",
                    source: "https://www.youtube.com/watch?v=itoKeywVNBI"
                },
                {
                    title: "Introducing Test Studio DevEdition",
                    poster: "",
                    source: "https://www.youtube.com/watch?v=A2rmIx9rPG0"
                },
                {
                    title: "Progress Application Server OpenEdge",
                    poster: "",
                    source: "https://www.youtube.com/watch?v=3Ce11N9udR4&list=PLC679RvCan2BJ9HCdUyZhnhHKActnrape"
                }
                ]
            });

var listView = $("#listView").kendoListView({
                dataSource: videos,
                selectable: true,
                scrollable: true,
                template: kendo.template($("#template").html()),
                change: onChange,
                dataBound: onDataBound
            });

function onChange() {
                var index = this.select().index();
                var dataItem = this.dataSource.view()[index];
                $("#mediaplayer").data("kendoMediaPlayer").media(dataItem);
            }

function onDataBound() {
                this.select(this.element.children().first());
            }

});
    </script>
    <script type="text/x-kendo-template" id="template">
<li class="k-item k-state-default" onmouseover="$(this).addClass('k-state-hover')"
            onmouseout="$(this).removeClass('k-state-hover')">
            <span>
                <img src="#:poster#" />
                <h5>
#:title#</h5>
</span>
        </li>
</script>
    <style>
        .k-mediaplayer {
            float: left;
            box-sizing: border-box;
            width: 70%;
        }

.playlist {
            float: left;
            height: 360px;
            overflow: auto;
            width: 30%;
        }
        @media(max-width: 800px)
        {
        .playlist,
        .k-mediaplayer {
            width: 100%;
        }}

.playlist ul, .playlist li {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

.playlist .k-item {
                border-bottom-style: solid;
                border-bottom-width: 1px;
                padding: 14px 15px;
            }

.playlist .k-item:last-child {
                    border-bottom-width: 0;
                }

.playlist span {
                cursor: pointer;
                display: block;
                overflow: hidden;
                text-decoration: none;
            }

.playlist span img {
                    border: 0px none;
                    display: block;
                    height: 56px;
                    object-fit: cover;
                    width: 100px;
                    float: left
                }

.playlist h5 {
                display: block;
                font-weight: normal;
                margin: 0;
                overflow: hidden;
                padding-left: 10px;
                text-align: left;
            }
    </style>
</div>
</body>
</html>

YOUTUBE VIDEO PLAYLİST EMBED CODE

Gönderen refsa

Facebook

Most Popular

KAN TAHLIL TERIMLER VE KISALTMALARI

KANSER VE BELIRTILERI...

Youtube Page

Tags

Categories

Lorem Ipsum

About This Blog

EHLI SUNNET ITIKAD KITABI

Footer Menu Widget

Contact form

YOUTUBE VIDEO PLAYLİST EMBED CODE

Gönderen refsa

Bu yayınları beğenebilirsiniz

Social Plugin

Facebook

Most Popular

KAN TAHLIL TERIMLER VE KISALTMALARI

KANSER VE BELIRTILERI...

Youtube Page

Tags

Categories

Lorem Ipsum

About This Blog

EHLI SUNNET ITIKAD KITABI

Footer Menu Widget

Contact form