Don't nest caption link within play button (#211)

Previously the guidance element which contains a link was nested within the play button.

Interactive elements shouldn't be nested within each other.

src/js/video.js

@@ -356,23 +356,27 @@ class Video {
 		const playCTA = document.createElement('div');
 		playCTA.className = `o-video__play-cta ${this.opts.placeholderHint ? 'o-video__play-cta--with-hint' : 'o-video__play-cta--without-hint'}`;
 
+		this.placeholderControls = document.createElement('div');
+		this.placeholderControls.className = 'o-video__placeholder-controls';
+
 		this.playButtonEl = document.createElement('button');
 		this.playButtonEl.className = 'o-video__play-button';
 
 		const playButtonIconEl = document.createElement('span');
 		playButtonIconEl.className = 'o-video__play-button-icon';
 		playButtonIconEl.textContent = this.opts.placeholderHint;
 
-
 		playCTA.appendChild(playButtonIconEl);
 
+		this.playButtonEl.appendChild(playCTA);
+		this.placeholderControls.appendChild(this.playButtonEl);
+
 		const { captionsUrl } = this.videoData || {};
 		if (!captionsUrl && this.guidance) {
-			playCTA.appendChild(this.guidance.createPlaceholder());
+			this.placeholderControls.appendChild(this.guidance.createPlaceholder());
 		}
-		this.playButtonEl.appendChild(playCTA);
 
-		this.placeholderEl.appendChild(this.playButtonEl);
+		this.placeholderEl.appendChild(this.placeholderControls);
 
 		this.placeholderEl.addEventListener('click', () => {
 			this.didUserPressPlay = true;

src/scss/_placeholder.scss

@@ -30,11 +30,15 @@
 		}
 	}
 
-	.o-video__play-button {
+	.o-video__placeholder-controls {
+		display: flex;
 		position: absolute;
 		bottom: 0;
 		// always align left, even when `text-align:center` is inherited
 		left: 0;
+	}
+
+	.o-video__play-button {
 		padding: 0;
 		border: 0;
 		background-color: transparent;