How to Embed a Youtube Video into your Website using the Dynamik Child Theme

Google loves video, but what if you don’t have the resources, time or know how to produce this much coveted content?  The answer is actually very simple, embed a YouTube video that has already been created.  What follows are my attempts, pros and cons and struggles….

YouTube is meant for sharing.  So create your own YouTube channel, build a playlist and get embedding. This following video, borrowed from YouTube, will help you get started.

Linking to the YouTube Video

The ‘sharing’ link is being used below: https://youtu.be/2jaef2PQ5Kw

This had the desired result, but no Google juice. However, you can use the link to add video to your playlist.

Trying to Track the Link to a YouTube Video

The ‘sharing’ link was https://youtu.be/2jaef2PQ5Kw but for tracking purposes, I’ve changed it to  http://bit.ly/APerfectYou-Eyebrow-Tattoo-Video

http://bit.ly/APerfectYou-Eyebrow-Tattoo-Video

Oh dear, nothing has happened.  This isn’t working at all.  Obviously, one can’t shorten the link.

Using the Embed YouTube HTML

The ‘embed’ html was copied and pasted below: <iframe src=”https://www.youtube.com/embed/2jaef2PQ5Kw” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

The embed was successful but the result is not responsive.  Apparently, percentages can’t be used with iframe, so a little more research is required…

Custom CSS to Wrap the Video

The following videoWrapper solves the problem of an unresponsive video.

Genesis Framework Dynamik Custom CSS for Embedding Video

 

Experimenting below with ‘videoWrapperx’. The code used to embed the video below follows:

<div class=”videoWrapperx”><iframe src=”https://www.youtube.com/embed/2jaef2PQ5Kw” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>