don't show error message while iframe fades in #1577

css/reveal.css

@@ -1140,6 +1140,7 @@ body {
   display: inline-block;
   width: 40px;
   height: 40px;
+  line-height: 36px;
   padding: 0 10px;
   float: right;
   opacity: 0.6;
@@ -1188,6 +1189,23 @@ body {
   opacity: 1;
   visibility: visible; }
 
+.reveal .overlay.overlay-preview.loaded .viewport-inner {
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  top: 45%;
+  width: 100%;
+  text-align: center;
+  letter-spacing: normal; }
+
+.reveal .overlay.overlay-preview .x-frame-error {
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease 0.3s;
+          transition: opacity 0.3s ease 0.3s; }
+
+.reveal .overlay.overlay-preview.loaded .x-frame-error {
+  opacity: 1; }
+
 .reveal .overlay.overlay-preview.loaded .spinner {
   opacity: 0;
   visibility: hidden;

css/reveal.scss

@@ -1195,6 +1195,7 @@ body {
 			display: inline-block;
 			width: 40px;
 			height: 40px;
+			line-height: 36px;
 			padding: 0 10px;
 			float: right;
 			opacity: 0.6;
@@ -1250,11 +1251,18 @@ body {
 		position: absolute;
 		z-index: -1;
 		left: 0;
-		top: 60px;
+		top: 45%;
 		width: 100%;
 		text-align: center;
 		letter-spacing: normal;
 	}
+	.reveal .overlay.overlay-preview .x-frame-error  {
+		opacity: 0;
+		transition: opacity 0.3s ease 0.3s;
+	}
+	.reveal .overlay.overlay-preview.loaded .x-frame-error  {
+		opacity: 1;
+	}
 
 	.reveal .overlay.overlay-preview.loaded .spinner {
 		opacity: 0;

js/reveal.js

@@ -1604,7 +1604,7 @@
 			'<div class="viewport">',
 				'<iframe src="'+ url +'"></iframe>',
 				'<small class="viewport-inner">',
-				'This link is refused to display in a frame due to its policy',
+					'<span class="x-frame-error">Unable to load iframe. This is likely due to the site\'s policy (x-frame-options).</span>',
 				'</small>',
 			'</div>'
 		].join('');