expand video

2 files changed, 23 insertions, 1 deletions

diff --git a/assets/css/application.css b/assets/css/application.css
index 1c6d241..fa98475 100644
--- a/assets/css/application.css
+++ b/assets/css/application.css
@@ -194,3 +194,22 @@ header {
 	font-size: 2em;
 	line-height: 1;
 }
+
+
+.responsive-object {
+    height: 0;
+    overflow: hidden;
+ }
+ .responsive-object iframe,
+ .responsive-object object,
+ .responsive-object embed {
+     position: absolute;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+     position:absolute;
+  }
+
+.sample-media{
+}
diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js
index c728e47..c1462f6 100644
--- a/assets/js/views/sample.js
+++ b/assets/js/views/sample.js
@@ -28,7 +28,10 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({
 			var iframe = $('<iframe/>', {
 				src: iframe_src
 			});
-			$('#video').append(iframe[0]);
+            var wrapper= document.createElement('div');
+            $(wrapper).addClass("responsive-object");
+            $(wrapper).append(iframe[0]);
+			$('#video').append(wrapper);
 			var player = new OP.Player(iframe[0]);
 			that.model.set('player', player);
 			that.model.set('iframe', iframe);