+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / YouTube device support error

YouTube device support error

5 posts, 0 answered
  1. Greg
    Greg avatar
    8 posts
    Registered:
    21 Nov 2014
    29 May 2015
    Link to this post

    I'm having issues with YouTube videos not showing up properly on the page. I have 8 videos on a page and they all look like the attachment I've included. I've fixed this issue in WordPress before but not Sitefinity yet. I was wondering if anyone else has come across this and fixed this issue.

    Thanks!

  2. Markus
    Markus avatar
    2763 posts
    Registered:
    25 Nov 2005
    30 May 2015 in reply to Greg
    Link to this post

    Maybe this helps at the moment. But I guess this is something Telerik should look into and fix it asap.

     

    https://support.google.com/youtube/answer/6098135?hl=en

     

    http://youtube-eng.blogspot.ch/2014/03/committing-to-youtube-data-api-v3_4.html

     

    Markus

  3. Atanas Valchev
    Atanas Valchev avatar
    414 posts
    Registered:
    04 Jan 2016
    03 Jun 2015
    Link to this post
    Hi,

    Would it be possible to share some more information on how you use the youtube videos in Sitefinity, please? With this information we will be able to test further.

    Thank you in advance.

    Regards,
    Atanas Valchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  4. Greg
    Greg avatar
    8 posts
    Registered:
    21 Nov 2014
    04 Jun 2015 in reply to Atanas Valchev
    Link to this post

    Here is the code I'm using for the current widget:

    YouTubeVideoThumbnail.ascx

     

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="YouTubeVideoThumbnail.ascx.cs"
        Inherits="UserControls_YouTubeVideoThumbnail" %>
     
    <div class="trainingvideo" id="videogallery">
        <a rel="#voverlay" href="//www.youtube.com/embed/<%=VideoId %>" title="<%=Title %>">
            <div class="thumbcontainer">
                <img class="overlay" src="/UserControls/YouTubeVideoThumbnail/images/play_arrow.png" />
                <asp:Image ID="VideoThumbnail" runat="server" style="max-width: 100%; height: auto;"/>
            </div>
            <h2><%= Title %></h2>
            <p><%= Description %></p>
        </a>
    </div>

    YouTubeVideoThumbnail.ascx.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Xml;
    using System.IO;
     
    public partial class UserControls_YouTubeVideoThumbnail : System.Web.UI.UserControl
    {
        public string VideoId { get; set; }
     
        protected string Title { get; set; }
        protected string Description { get; set; }
     
        protected override void FrameworkInitialize() {
            if (Page == null) return;
     
            Page.ClientScript.RegisterClientScriptInclude("/videolightbox/engine/js/jquery.tools.min.js",
                                                              "/videolightbox/engine/js/jquery.tools.min.js");
            Page.ClientScript.RegisterClientScriptInclude("/videolightbox/engine/js/swfobject.js",
                                                          "/videolightbox/engine/js/swfobject.js");
            Page.ClientScript.RegisterClientScriptInclude("/videolightbox/engine/js/videolightbox.js",
                                                            "/videolightbox/engine/js/videolightbox.js");
     
            AddCss("/videolightbox/engine/css/overlay-minimal.css");
            AddCss("/videolightbox/engine/css/videolightbox.css");
            AddCss("/UserControls/YouTubeVideoThumbnail/css/style.css");
            base.FrameworkInitialize();
        }
        public override void RenderControl(HtmlTextWriter writer) {
            DoIt();
     
            base.RenderControl(writer);
        }
     
     
        private void DoIt() {
            if (VideoId != null) {
     
                /* This is the link that got replace on the front end
                <a rel="#voverlay" href="http://www.youtube.com/v/<;%=VideoId %>?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="<%=Title %>">*/
     
                System.Net.WebClient c = new WebClient();
                string videoString = c.DownloadString("http://gdata.youtube.com/feeds/api/videos/" + VideoId + "?v=2");
     
                using (XmlReader reader = XmlReader.Create(new StringReader(videoString)))
                {
                    reader.ReadToFollowing("title");
                    this.Title = reader.ReadElementContentAsString();
     
                    reader.ReadToFollowing("media:description");
                    this.Description = reader.ReadElementContentAsString();
     
                    while (reader.ReadToFollowing("media:thumbnail"))
                    {
                        reader.MoveToAttribute("yt:name");
                        if (reader.Value == "mqdefault")
                        {
                            reader.MoveToAttribute("url");
                            VideoThumbnail.ImageUrl = reader.Value;
                        }
                    }
                }
     
                string script = @"
                            function onYouTubePlayerReady(playerId) {
                                ytplayer = document.getElementById('video_overlay');
                                ytplayer.setVolume(100);
                            } ";
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "ytPlayerReady", script, true);
     
            }
        }
         
        private void AddCss(string url) {
            bool added = false;
            foreach (Control hc in Page.Header.Controls) {
                if (typeof(HtmlLink) == hc.GetType()) {
                    HtmlLink hcl = (HtmlLink)hc;
                    if (hcl.Href == url) {
                        added = true;
                        break;
                    }
                }
     
            }
            if (!added) {
                HtmlLink css = new HtmlLink();
                css.Href = url;
                css.Attributes["rel"] = "stylesheet";
                css.Attributes["type"] = "text/css";
                css.Attributes["media"] = "all";
     
     
                Page.Header.Controls.Add(css);
            }
        }
    }

  5. Atanas Valchev
    Atanas Valchev avatar
    414 posts
    Registered:
    04 Jan 2016
    09 Jun 2015
    Link to this post
    Hello,

    From the widget in your reply, I cannot see anything that is Sitefinity specific. This leads me to believe that you just need to update it to use the new version of the Youtube API and it should start working ok.

    Regards,
    Atanas Valchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
5 posts, 0 answered