YOUTUBE & IFRAME EMBEDS

On the mobile version of the site, alignment and sizing classes will not apply. If you defined a custom width style rule, it must be removed as it could create potential issues adjusting to various viewport sizes. Adhere to embed requirements defined on the desktop version.

YouTube Embed within Shaded Box

Depending on the flow of your page layout, the preferred method is to contain the video within a shaded box, but there will be some instances where going without is the better choice. Both are demonstrated below.

<div class="shadedBox group">
   <div class="customYouTube">
      <div class="align-center"> <!-- THIS CONTAINER & CLASS MUST REMAIN UNALTERED -->
         <iframe src="https://www.youtube.com/embed/?list=PLhI2Hn5NZlhN4TuRdBFSBW1n00YlKPcIW&showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
      </div>
   </div>
</div>

YouTube Embed without Shaded Box

<div class="customYouTube">
   <div class="align-center"> <!-- THIS CONTAINER & CLASS MUST REMAIN UNALTERED -->
      <iframe src="https://www.youtube.com/embed/?list=PLhI2Hn5NZlhN4TuRdBFSBW1n00YlKPcIW&showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

YouTube Lightbox Examples

If you want to highlight a series of videos without embeding them live, which can slow down your page load time quite a bit, take some cool screenshots and use the structure below to display them and open the videos individually in a lightbox! Be sure to insert applicable alt text along with your screenshot image.

Simply add data-lity within your anchor tag (as demonstrated below) to enable the lightbox function! Also notice that http: / https: is not included in the video link.

Download the template file below to use the play button overlay.

Click button to download video screenshot psd template file.

Single Thumbnail Lightbox Example

<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
	<img alt="McGrath's Service Departments named Corridor's Best" width="600" height="338" src="#" />
</a>

Two Column Video Thumbnail Lightbox Example

If you happened to display a series of videos within a multi-column layout, they will automatically adjust to a single column, filling the page region without any alterations.

Optional Video Title

<div class="twoColumns videoMenu group">
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
			<img alt="#" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
			<img alt="#" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
</div>

Three Column Video Thumbnail Lightbox Example

Optional Video Title

<div class="threeColumns videoMenu group">
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
			<img alt="#" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
			<img alt="#" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
			<img alt="#" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
</div>

Four Column Video Thumbnail Lightbox Example

Optional Video Title

<div class="fourColumns videoMenu group">
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
			<img alt="#" width="600" height="337" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
			<img alt="#" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
			<img alt="#" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
			<img alt="#" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
</div>