Styles & CSS Classes

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

Images

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>

Tables

Videos

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.