*Tip Before inserting code into the DDC page editor, you must compress it. You can do that by using this tool

YOUTUBE & IFRAME EMBEDS

YouTube embeds can be a little tricky! DDC's built in widgets are pretty lame, so we developed our own little solution. Alignment and sizing class tags such as floatLeft, floatRight, oneHalf, oneThird, etc can be applied to the main customYouTube container, but the divs within the main container must remain unaltered aside from the YouTube URL.

Another caveat to YouTube embeds you need to pay attention to is the embed URL itself. You must first obtain the Embed URL from the YouTube page (not the page URL or Share URL). There is also a particular string that needs to be amended to every URL, and if this stynax is not followed, your video will not work.

  • Example:
    https://www.youtube.com/embed/AtsAkMs8Zos?showinfo=0&wmode=transparent

If you're inserting a YouTube playlist, be aware that you will have to replace the question mark at the beginning of our string with an ampersand (&) as to not conflict with the YouTube URL. Demonstration below:

  • Example:
    https://www.youtube.com/embed/?list=PLhI2Hn5NZlhN4TuRdBFSBW1n00YlKPcIW&showinfo=0&wmode=transparent

In order to keep load times reasonable, you should try to limit YouTube embeds to one a page. However, you can use the image screenshot method to launch a video lightbox as a way to include additional video. Keep scrolling for demonstrations.

Full Width YouTube Embed within Shaded Box

When embedding YouTube videos at full width, the preferred method is to contain the video within a shaded box, but depending on your layout, there will be some instances where going without is the better choice. Both are demonstrated below.

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

Full Width YouTube Embed

<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>

One Third Width YouTube Embed

<div class="customYouTube oneThird">
	<div class="align-center">
		<iframe src="https://www.youtube.com/embed/?list=PLhI2Hn5NZlhN4TuRdBFSBW1n00YlKPcIW&showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

One Half Width YouTube Embed

<div class="customYouTube oneHalf">
	<div class="align-center">
		<iframe src="https://www.youtube.com/embed/?list=PLhI2Hn5NZlhN4TuRdBFSBW1n00YlKPcIW&showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

Two Thirds Width YouTube Embed

<div class="customYouTube twoThirds">
	<div class="align-center">
		<iframe src="https://www.youtube.com/embed/?list=PLhI2Hn5NZlhN4TuRdBFSBW1n00YlKPcIW&amp;showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

Defined Width YouTube Embed

To define a custom width to your YouTube embed, use the STYLE tag and define the width of the customYouTube container as demonstrated below.

<div class="customYouTube" style="width: 680px;">
	<div class="align-center">
		<iframe src="https://www.youtube.com/embed/?list=PLhI2Hn5NZlhN4TuRdBFSBW1n00YlKPcIW&amp;showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

YouTube Embed Float Examples

YouTube Float Right Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Button 1 
<div>
	<div class="customYouTube oneHalf floatRight">
		<div class="align-center">
			<iframe src="https://www.youtube.com/embed/?list=PLhI2Hn5NZlhN4TuRdBFSBW1n00YlKPcIW&amp;showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h3>YouTube Float Right Example</h3>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
	<a class="ctaButton" title="#" href="#">Button 1</a>
</div>

YouTube Float Left Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Button 1 
<div>
	<div class="customYouTube oneHalf floatLeft">
		<div class="align-center">
			<iframe src="https://www.youtube.com/embed/?list=PLhI2Hn5NZlhN4TuRdBFSBW1n00YlKPcIW&amp;showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
	<h3>YouTube Float Left Example</h3>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
	<a class="ctaButton" title="#" href="#">Button 1</a>
</div>

YouTube Lightbox Examples

If you want to highlight a series of videos without embedding 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

McGrath Emerging Leaders 
<a title="Click to view video!" href="//www.youtube.com/watch?v=fnizfAn4BXU" data-lity>
	<img alt="#" width="600" height="338" src="#" />
</a>

Two Column Video Thumbnail Lightbox Example

McGrath Emerging Leaders

Optional Video Title

McGrath Emerging Leaders

Optional Video Title

<div class="twoColumns videoMenu">
	<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

McGrath Emerging Leaders

Optional Video Title

McGrath Emerging Leaders

Optional Video Title

McGrath Emerging Leaders

Optional Video Title

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

Four Column Video Thumbnail Lightbox Example

McGrath Emerging Leaders

Optional Video Title

McGrath Emerging Leaders

Optional Video Title

McGrath Emerging Leaders

Optional Video Title

McGrath Emerging Leaders

Optional Video Title

<div class="fourColumns videoMenu">
	<div>
		<a title="Click to view video!" href="//www.youtube.com/watch?v=tzOnvQ7kGdc" 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=s5dE8ADKlqo" data-lity>
			<img alt="#" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
	<div>
		<a href="//www.youtube.com/watch?v=XVskia9xdSM" data-lity>
			<img alt="How to Buy a Car" width="600" height="338" src="#" />
		</a>
		<h4>Optional Video Title</h4>
	</div>
</div>