Using the UoB YouTube Player control
Basic use
To insert on a page:
● Right-click and select Web Controls > University of Birmingham > YouTube Player
Control Properties
●
●
●
●
●
●
Title : Sets the title tag of the iframe created for the YouTube player
Url : The embded web address of the YouTube video e.g. http://www.youtube.com/embed/2VB35PU3n4.
This can be found by clicking on ‘Share’ under ‘Embed’ on a YouTube video page.
N.B. Use the Embed URL NOT the Link URL.
Width : The height of the player (in pixels)
Height : The height of the player (in pixels)
Allow full screen : Enables full-screen option on player
ID: The ID of the control which should be unique. If the YouTube player control is being added to
this page more than once, ensure that each ID is unique.
Transparency issues with IFrames
The player code is deployed via an iframe. Unfortunately in an iframe, the default wmode is windowed
which essentially gives it a z-index greater then everything else and it will overlay over anything. This
means that the player will sit in front of any overlapping content, obscuring it. On our website this has the
effect of obscuring the sentence drop-down, if the player is positioned to wards the top of the page.
Work around
The iframe needs to be instructed to set a wmode to transaparent - the easiest means of doing that is to
add a parameter to your URL:
wmode=transparent
like so:
https://www.youtube.com/embed/2V-B35PU3n4?wmode=transparent
So, the control properties might look something like:
And the page/sentence/player with the wmode=transparent parameter: