Setting the Title of an iFrame created with the YouTube Widget

Mike Bilz asked on October 21, 2017 01:10

Hello Kentico Team,

A recent Accessibility scan of my site flagged a YouTube video as non-compliant because its iFrame lacked a Title tag.

All of the YouTube videos on my site are added using the YouTube Widget.

Is there a way to alter the YouTube Widget code behind so that the iFrame it creates has the required Title tag? It doesn't need to be anything fancy, it could literally just be "YouTube Video Content", but it needs to be there to satisfy WCAG guidelines.

Thanks.

-mike

iframe youtube widget

Correct Answer

Matt Nield answered on October 21, 2017 10:36

Hi Mike, the iframe is set inside the MediaHelper class in CMS.Base.Web.UI, so it's not somethign you cna really change like that. What i woudl suggest doing is to copy the webpart files in CMSWebParts/Media/YouTubeVideo.ascx* and in your new version make the relevant modifcations so the the markup required is generated in the web part, rather than hard-coded in the assembly.

YouTubeVideo.ascx has a literal controle called litPlaceholder where the markup is knjected, so you could simply set this in the SetupControl method or place the required markup in place like this:

<asp:PlaceHolder ID="phVideo" runat=server">
    <iframe type="text/html" width="<%=Width%>" height="<%=Height%>" src="<%=VideoURL%>" title="YouTube Video Content"></iframe>
</asp:PlaceHolder>

The asp:PlaceHolder ensure that we can use the <%=

You will also need to make sure that the video URL is /embed/[video id] rather than /watch?v=[video id].

0 votesVote for this answer Unmark Correct answer

Recent Answers

Mike Bilz answered on October 23, 2017 19:41

Hi Matt,

Does this replace ltlPlaceHolder , ltlScript or both?

<asp:Literal ID="ltlPlaceholder" runat="Server" EnableViewState="false" />
<asp:Literal ID="ltlScript" runat="Server" EnableViewState="false" />

Also, how does this effect the Flash Object redundancy in video.js? Will that still work if I replace the code above?

Thanks.

-mike

0 votesVote for this answer Mark as a Correct answer

David te Kloese answered on October 24, 2017 08:59

in this case you're creating your own widget so you can change it for your needs.

In this example the original ltlPlaceholder is used by the code-behind to render the Youtube html. In code-behind you see:

ltlPlaceholder.Text = MediaHelper.GetYouTubeVideo(ytParams);

But you obviously not going to use this if you buildup your own version.

0 votesVote for this answer Mark as a Correct answer

Matt Nield answered on October 24, 2017 09:57

Hi Mike, I'm basically replacing ltlPlaceholder to render my own markup and leaving the scripts well alone.

0 votesVote for this answer Mark as a Correct answer

Mike Bilz answered on October 24, 2017 21:16 (last edited on October 24, 2017 22:12)

Hi Matt and David,

Well, in the process of trying to get this to work Kentico suddenly decided that the Kentico 9 code I had been using up to this point was no longer allowed and started throwing errors. I was able to get the errors to stop by updating the code a bit to more closely match the the YouTube webpart in Kentico 10, but now my webpart returns no content.

None. Just empty divs.

I have no idea what is causing this new issue, since I barely understand why the system started throwing errors in the first place.

On the plus side, the iFrame is there and has a title.

The field I lost was a simple text field used for a video transcript. The Kentico 9 code behind looked like this:

public string VideoTranscriptVar
    {
        get
        {
            return ValidationHelper.GetString(this.GetValue("VideoTranscript"), "");
        }
        set
        {
            this.SetValue("VideoTranscript", "");
        }
    }

Any ideas on why my web part suddenly stopped showing content?

Thanks.

-mike

0 votesVote for this answer Mark as a Correct answer

Mike Bilz answered on October 25, 2017 18:39 (last edited on October 25, 2017 18:41)

Never mind, I was missing a Kentico 10 code block that fired the SetupControl function. No SetupControl, no content.

Thanks for the help everyone. Everything is working great, and the new web part is accessible.

In addition to Matt's fix above I also went back into the form for my Web Part and added a validation rule that requires users to use the /embed/ version of the YouTube URL.

Thanks again,

-mike

0 votesVote for this answer Mark as a Correct answer