Merge pull request #202 from fancycode/youtube_id_selectors

Don't use "id" selectors in directives.

src/styles/components/_youtubevideo.scss

@@ -90,7 +90,7 @@
   top: 0;
 }
 
-#youtubecontainer { // scss-lint:disable IdSelector
+.youtubecontainer {
   position: relative;
 
   &.fullscreen {
@@ -98,7 +98,7 @@
   }
 }
 
-#youtubeplayerinfo { // scss-lint:disable IdSelector
+.youtubeplayerinfo {
   bottom: 10%;
   left: 0;
   opacity: 0;

static/js/directives/youtubevideo.js

@@ -108,7 +108,7 @@ define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo
 
 			var createSandboxApi = function() {
 				if (!sandboxApi) {
-					var sandboxFrame = $("#youtubeplayer", $element)[0];
+					var sandboxFrame = $(".youtubeplayer", $element)[0];
 
 					var template = sandboxTemplate;
 					template = template.replace(/__PARENT_ORIGIN__/g, $window.location.protocol + "//" + $window.location.host);
@@ -631,7 +631,7 @@ define(['require', 'jquery', 'underscore', 'moment', 'text!partials/youtubevideo
 
 		var compile = function(tElement, tAttr) {
 			return function(scope, iElement, iAttrs, controller) {
-				$(iElement).find("#youtubecontainer").on("dblclick", _.debounce(function(event) {
+				$(iElement).find(".youtubecontainer").on("dblclick", _.debounce(function(event) {
 					scope.toggleFullscreen(event.delegateTarget);
 				}, 100, true));
 			}

static/partials/youtubevideo.html

@@ -29,11 +29,11 @@
 			</div>
 
 			<div ng-show="playbackActive">
-				<div class="row" id="youtubecontainer">
+				<div class="row youtubecontainer">
 					<div class="embed-responsive embed-responsive-16by9">
-						<iframe sandbox="allow-scripts allow-same-origin" id="youtubeplayer"></iframe>
+						<iframe sandbox="allow-scripts allow-same-origin" class="youtubeplayer"></iframe>
 					</div>
-					<div id="youtubeplayerinfo">
+					<div class="youtubeplayerinfo">
 						<div>{{_('Currently playing')}}<br><a href="{{ currentVideoUrl }}" rel="external" target="_blank">{{ currentVideoUrl }}</a></div>
 					</div>
 					<div class="click-container" ng-show="!isPublisher">
@@ -54,9 +54,9 @@
 		<div class="overlaybar-content">
 			<form class="container-fluid" role="form">
 				<div class="form-group">
-					<label for="youtubeurl">{{_('YouTube video to share')}}</label>
+					<label>{{_('YouTube video to share')}}</label>
 					<div class="overlaybar-input">
-						<input type="text" class="form-control input-lg" ng-disabled="!youtubeAPIReady" id="youtubeurl" ng-model="youtubeurl" required placeholder="{{_('YouTube URL')}}">
+						<input type="text" class="form-control input-lg" ng-disabled="!youtubeAPIReady" ng-model="youtubeurl" required placeholder="{{_('YouTube URL')}}">
 						<div class="overlaybar-buttons">
 							<button type="button" class="btn btn-primary" ng-click="shareVideo(youtubeurl)" ng-disabled="youtubeurl === ''">{{_('Share')}}</button>
 						</div>