3 files changed, 33 insertions, 9 deletions
diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js
index 6be634e5..9c1ddebc 100644
--- a/src/js/utils/elements.js
+++ b/src/js/utils/elements.js
@@ -4,6 +4,7 @@
 
 import { toggleListener } from './events';
 import is from './is';
+import { extend } from './objects';
 
 // Wrap an element
 export function wrap(elements, wrapper) {
@@ -137,7 +138,7 @@ export function getAttributesFromSelector(sel, existingAttributes) {
     }
 
     const attributes = {};
-    const existing = existingAttributes;
+    const existing = extend({}, existingAttributes);
 
     sel.split(',').forEach(s => {
         // Remove whitespace
@@ -147,7 +148,7 @@ export function getAttributesFromSelector(sel, existingAttributes) {
 
         // Get the parts and value
         const parts = stripped.split('=');
-        const key = parts[0];
+        const [key] = parts;
         const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : '';
 
         // Get the first character
@@ -156,11 +157,11 @@ export function getAttributesFromSelector(sel, existingAttributes) {
         switch (start) {
             case '.':
                 // Add to existing classname
-                if (is.object(existing) && is.string(existing.class)) {
-                    existing.class += ` ${className}`;
+                if (is.string(existing.class)) {
+                    attributes.class = `${existing.class} ${className}`;
+                } else {
+                    attributes.class = className;
                 }
-
-                attributes.class = className;
                 break;
 
             case '#':
@@ -179,7 +180,7 @@ export function getAttributesFromSelector(sel, existingAttributes) {
         }
     });
 
-    return attributes;
+    return extend(existing, attributes);
 }
 
 // Toggle hidden
diff --git a/src/js/utils/numbers.js b/src/js/utils/numbers.js
new file mode 100644
index 00000000..f6eb65c8
--- /dev/null
+++ b/src/js/utils/numbers.js
@@ -0,0 +1,17 @@
+/**
+ * Returns a number whose value is limited to the given range.
+ *
+ * Example: limit the output of this computation to between 0 and 255
+ * (x * 255).clamp(0, 255)
+ *
+ * @param {Number} input
+ * @param {Number} min The lower boundary of the output range
+ * @param {Number} max The upper boundary of the output range
+ * @returns A number in the range [min, max]
+ * @type Number
+ */
+export function clamp(input = 0, min = 0, max = 255) {
+    return Math.min(Math.max(input, min), max);
+}
+
+export default { clamp };
diff --git a/src/js/utils/style.js b/src/js/utils/style.js
index 191e6461..e51892e5 100644
--- a/src/js/utils/style.js
+++ b/src/js/utils/style.js
@@ -44,8 +44,14 @@ export function getAspectRatio(input) {
     }
 
     // Get from embed
-    if (ratio === null && !is.empty(this.embed) && is.string(this.embed.ratio)) {
-        ratio = parse(this.embed.ratio);
+    if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) {
+        ({ ratio } = this.embed);
+    }
+
+    // Get from HTML5 video
+    if (ratio === null && this.isHTML5) {
+        const { videoWidth, videoHeight } = this.media;
+        ratio = reduceAspectRatio([videoWidth, videoHeight]);
     }
 
     return ratio;