All publishers to the website should strive to keep their information consistent with the existing look and feel of the website and should refer to the university’s Brand Guide for matters of permitted colors, fonts, logos, and other matters of writing, punctuation, proper usage of academic names and terms, etc.
For more information on CSS stylings, see CSS Examples on SDSMT Website
center – to center text
marginTop0 – to remove space above a paragraph or other element
marginBottom0 – to remove space below a paragraph or other element
textGoldOnLight – creates the gold color
textGreen – to differentiate text by color. (green is our standard for highlighted information)
floatLeft
imgRightPadding
imgLeftPadding
img-responsive - Images should be given a class of img-responsive so they will automatically resize for any device.
floatLeft or floatRight – to align an image left or right; text will wrap to the other side.
imgRightPadding or imgLeftPadding – to add space around right or left aligned image. (Use imgRightPadding with floatRight; imgLeftPadding with floatLeft.)
img-responsive – to make a large image resize in various screens and devices. Most images will need this class added to them
Responsive Embed:
You can use the website embedresponsively.com to prepare code to responsively embed media. It will return code with style references. Those styles are set up as a class called “embed-container” in our stylesheets, so a sample of the code needed would look like this: <div class=”embed-container”><iframe src=”http://www.youtube.com/embed/QILiHiTD3uc” frameborder=”0” allowfullscreen=”true”></iframe></div>
YouTube Video Embed and Playlist Embed
YouTube Embed Options:
YouTube Player Parameter's: https://developers.google.com/youtube/player_parameters
YouTube Embed Code Generator: https://developers.google.com/youtube/youtube_player_demo or http://youtubeembedcode.com/en/
Example Embedded Video with Options:
Responsive <div class="embed-container"><iframe src="https://www.youtube.com/embed/videoseries?rel=0&v=y4laLSewKZM&list=PLeDC9r0CP815VXVbH2A8x43eSMqrilMYU" frameborder="0" allowfullscreen="true"></iframe></div>
<div class="col-lg-24"><p><iframe src="https://www.youtube.com/embed/videoseries?rel=0&v=y4laLSewKZM&list=PLeDC9r0CP815VXVbH2A8x43eSMqrilMYU" rel="0" allow="autoplay; encrypted-media" width="800px" height="450" frameborder="0"></iframe></p></div>
Welcome Week - Playlist - Autoplay, mute, loop <div class="center"><div class="backgroundBlue"><iframe class="embed-responsive-item" id="ytplayer" type="text/html" width="800" height="450" src="#" frameborder="0"></iframe></div></div>
<div class="embed-container"><iframe src="https://www.youtube.com/embed/gwfins5ts_g" frameborder="0" allowfullscreen="true"></iframe></div>
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"width="100%" height="443" type="text/html" src="https://www.youtube.com/embed/gwfins5ts_g?autoplay=1&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0"></iframe>
<div class="embed-container"><iframe src="https://www.youtube.com/embed/gwfins5ts_g" frameborder="0" allowfullscreen="true"></iframe></div>
<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="443" type="text/html" src="https://www.youtube.com/embed/gwfins5ts_g?autoplay=1&fs=1&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0"></iframe>
<iframe width="800" height="400" src="https://www.youtube.com/embed/gwfins5ts_g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
Add the below items into the iframe to enable full screen on all devices:
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"
In the past we used: to make video (and other features) responsive by using the tools at www.embedresponsively.com. It will give you code like this to embed a video:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>
The styling is now set up as a class in our stylesheets – so you just need to add this to make your video responsive on the webpage (display full-size or within a bootstrap container):
<div class="embed-container"><iframe src="http://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen></iframe></div>
Note: If Ektron should fuss about the allowfullscreen attribute, change it to allowfullscreen="true" – and that should make it happier.