× İletişim Formu Amp-Youtube Lightbox Arlina Design 3/20/2018 Etiketler : AMP CSS3 HTML5 Arlina Design <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>amp-lightbox</title> <script async="async" src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> <script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate='amp-boilerplate'> body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style> <noscript> <style amp-boilerplate='amp-boilerplate'> body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} </style> </noscript> <style amp-custom='amp-custom'> .center,.video-box{text-align:center} .lightbox-video{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center} .video-box{width:100%;max-width:800px;margin:0 auto} .btn-play{color:#fff;background:#D32F1F;padding:10px 16px 10px 40px;position:relative;font:500 18px Roboto,sans-serif;line-height:1.3333333;border-radius:4px;margin-bottom:5px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;display:inline-block;background-image:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .btn-play:active,.btn-play:focus,.btn-play:hover{color:#fff;background-color:#C62828;border-color:#B71C1C} .btn-play:before{content:"";color:#fff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVHcEz///////////////////////////////////////////////////////////////////////////+PybD1AAAAE3RSTlMA0I8LFb1fpfg24O1KJAQFqHp1traVjgAAASVJREFUaN7t2NsOgjAQhGHU4hYPoO77v6sXmijSwprd6dXMC3wx+cHSruM4juM4jkNtHKYGiuyGBojq/tAA0dOlAaJ6Sw0QPR8bIKr9tQGi+T7hEVVYzd8IrOY5Aqr5B8HUvEAQNS8RQM0lJLzmIhJdcwWJrbmKRNZcRwJrXkPCal5FomreQGJq3kJCat5GAmq2IO6aTYi3ZiPiq9mKuGq2I46a/0BU+xGPSIL/EkfHViR7nkgj4nu3mJD8GOFPvPt9L9hn3YhIgv+fxJwmBNatEQk74QmsWwsSeeoW7IlrDZHYLyHBnoJrSI7/OhXsl0kRCey2ioDuPgT73btABHYfJdi7iBmSoXeEgr0f+iCYbucI8s7ujWBvH187po7jOI7jOK60J3G1YasB7uQzAAAAAElFTkSuQmCC);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px} </style> </head> <body> <br /> <br /> <amp-lightbox id="open-video" layout="nodisplay"> <div class="lightbox-video" on="tap:open-video.close,btn-play.show" role="button" tabindex="0" aria-label="Close Video"> <div class="video-box"> <amp-youtube id="video" data-videoid="P2YpKF1roDk" height="270" layout="responsive" width="480" data-param-controls="0" data-param-rel="0" data-param-showinfo="0" data-param-modestbranding="1" data-param-autohide="1" hidden> </amp-youtube> </div> </div> </amp-lightbox> <div class="center"> <button id="btn-play" class="btn btn-lg btn-play" on="tap:video.show, video.play, btn-play.hide, open-video">Video Oynat</button> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Amp-Youtube Lightbox" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Amp-Youtube Lightbox Arlina Design 3/20/2018 Etiketler : AMP CSS3 HTML5 Arlina Design <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title>amp-lightbox</title> <script async="async" src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> <script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate='amp-boilerplate'> body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style> <noscript> <style amp-boilerplate='amp-boilerplate'> body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} </style> </noscript> <style amp-custom='amp-custom'> .center,.video-box{text-align:center} .lightbox-video{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center} .video-box{width:100%;max-width:800px;margin:0 auto} .btn-play{color:#fff;background:#D32F1F;padding:10px 16px 10px 40px;position:relative;font:500 18px Roboto,sans-serif;line-height:1.3333333;border-radius:4px;margin-bottom:5px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;display:inline-block;background-image:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .btn-play:active,.btn-play:focus,.btn-play:hover{color:#fff;background-color:#C62828;border-color:#B71C1C} .btn-play:before{content:"";color:#fff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAPFBMVEVHcEz///////////////////////////////////////////////////////////////////////////+PybD1AAAAE3RSTlMA0I8LFb1fpfg24O1KJAQFqHp1traVjgAAASVJREFUaN7t2NsOgjAQhGHU4hYPoO77v6sXmijSwprd6dXMC3wx+cHSruM4juM4jkNtHKYGiuyGBojq/tAA0dOlAaJ6Sw0QPR8bIKr9tQGi+T7hEVVYzd8IrOY5Aqr5B8HUvEAQNS8RQM0lJLzmIhJdcwWJrbmKRNZcRwJrXkPCal5FomreQGJq3kJCat5GAmq2IO6aTYi3ZiPiq9mKuGq2I46a/0BU+xGPSIL/EkfHViR7nkgj4nu3mJD8GOFPvPt9L9hn3YhIgv+fxJwmBNatEQk74QmsWwsSeeoW7IlrDZHYLyHBnoJrSI7/OhXsl0kRCey2ioDuPgT73btABHYfJdi7iBmSoXeEgr0f+iCYbucI8s7ujWBvH187po7jOI7jOK60J3G1YasB7uQzAAAAAElFTkSuQmCC);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px} </style> </head> <body> <br /> <br /> <amp-lightbox id="open-video" layout="nodisplay"> <div class="lightbox-video" on="tap:open-video.close,btn-play.show" role="button" tabindex="0" aria-label="Close Video"> <div class="video-box"> <amp-youtube id="video" data-videoid="P2YpKF1roDk" height="270" layout="responsive" width="480" data-param-controls="0" data-param-rel="0" data-param-showinfo="0" data-param-modestbranding="1" data-param-autohide="1" hidden> </amp-youtube> </div> </div> </amp-lightbox> <div class="center"> <button id="btn-play" class="btn btn-lg btn-play" on="tap:video.show, video.play, btn-play.hide, open-video">Video Oynat</button> </div> </body> </html>
Yorum Gönder