Youtube AMP Lightbox, blog ve web sitelerine eklenen Youtube videolarının yüklenme gecikmelerini önleyen ve sayfa yüklenme hızını etkilemede...
Youtube AMP Lightbox, blog ve web sitelerine eklenen Youtube videolarının yüklenme gecikmelerini önleyen ve sayfa yüklenme hızını etkilemeden Youtube video görüntüsünü değiştiren yeni bir özelliktir.
Bu, Youtube AMP video kutusu, ziyaretçilerin video oynatma butonuna tıkladığında video tüm sayfayı kaplayan arka ışık efekti ile açılır. Bu şekilde paylaşılan Youtube videolarınız ziyaretçiler tarafından daha çok ilgi çekecek ve tıklama alacaktır.
Bu eklenti, AMP HTML blog yazılarında video içeriği sunmak için daha fazla seçenek sunuyor.
AMP-Youtube Video Eklentisi Nasıl Kurulur?
AMP HTML blogunuzda amp-youtube video eklentisini kurmak için aşağıdaki adımları takip edin.
AMP HTML şablonunuzun kodları arasında aşağıdaki amp javascript kodlarının olup-olmadığını kontrol edin. Eğer, javascript kodları şablon kodları arasında bulunuyorsa tekrar eklemenize gerek yok, bulunmuyorsa aşağıdaki javascript kodlarını </head> veya </head><!--<head/>--> kodunun bir satır üzerine ekleyin.
amp-youtube ve amp-lightbox
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script>
<script async='async' custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>AMP-Youtube video butonu:
Blog yayınlarınız arasında sadece bir buton şeklinde görüntülenen ve tıklandığında arka ışık efekti ile açılır. Videoların daha ön plana çıkması ve izleme kolaylığı da sağlamaktadır.
Aşağıdaki CSS kodlarını şablon editör sayfanızda bulunan amp-custom stil dosyasına ekleyin.
CSS
.center,.video-box{text-align:center}
.lightbox-video{background:rgba(0,0,0,.8);position:absolute;display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.video-box{margin:0 auto;width:100%;max-width:800px}
.btn-play{background-color:#D32F2F;color:#fff;font:500 18px Roboto,sans-serif;padding:10px 16px 10px 40px;position:relative;line-height:1.3333333;border-radius:6px;margin-bottom:5px;text-align:center;white-space:nowrap;cursor:pointer;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;-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{background-color:#C62828;color:#fff;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}Yukarıdaki adımları tamamladıktan sonra şablonu kaydedin.
Aşağıdaki AMP HTML kodu blog yayınlarınıza ekleyerek Youtube videolarınızı paylaşabilirsiniz.
AMP HTML
<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="Video Kapat">
<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" aria-label="Video Oynat">Video Oynat</button>
</div>;Yukarıdaki AMP HTML kod içerisinde belirtilen video ID'sini değiştirerek videolarınızı paylaşabilirsiniz.
AMP-Youtube Google+ stili:
Google+ sayfalarında görüntülenen Youtube videolarının görüntü şekliyle aynı olan ve tıklandığında siyah arka ışık efektiyle genişleyen görünümü ile ziyaretçilerin videoları daha rahat izlemesini sağlamaktadır.
Kurulum yapmak istiyorsanız, şağıdaki CSS kodlarını amp-custom stil dosyasına ekleyin ve şablonu kaydedin.
CSS
.video-box,.video-img{width:100%;text-align:center;margin:0 auto}
.lightbox-video{background:rgba(0,0,0,.8);position:absolute;display:flex;width:100%;height:100%;align-items:center;justify-content:center}
.video-box{max-width:800px}
.video-img{position:relative;max-width:600px}
.playonimage{width:56px;height:56px;-webkit-border-radius:50%;cursor:pointer;margin:auto;border-radius:50%;background-color:rgba(0,0,0,.2);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAY1BMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////80LMUcAAAAIHRSTlMA1d4MSXeg9glf6yEq4hfnnr7Z8qm5U/3Jm1pwFJcmBYTgJ9QAAAIjSURBVGje7VnJdoMwDFSMHVMSQljCklX//5U99NQHGEm22gtz9tPAWNYKsGPHDiou1h3rpvDD4Iumvjp7SWg86yeDM5ipz5KYt53HFfjORn+8KzEI88iizLe4icLlUvtfFZJQ3kXmTzWScTsJPr9FBtovpvn8iExMrJu4jMjGyHh67xIFMOSLOFcoQnUmfr/QPmL1JulfohiGcA/5iBEYt33piFG4br4vjMTGizu1sQRt2FlrjMZNVSBExEBszaoUBOW6JzlMArf6A0XIOzyZoMgkPwDnA5nhsWz/E4wRnBxhVuoTDBMAkGVarma6TQKyTN3iFfttAqJMg1/y1B4JBFSZ+gWCiUZAk+m1QGCIBCSZmoVEhlQCkkxPppP+JiDIZNlxiFmYOXaqnEX2sEwTO9XMq6egTPXsfMMlCMt0mB0v2ARBmYrZYS8gCMjkZ2cHCcG6TMPfE6hLpH7J6m6a+KHN67urdqhQD3bq4Vo94ainTP2kn7RssbqFF7a5buk4dP9T/Ib9KEH5Dg/lBkS/hVJvAiEvU9gPtLFwT0HQh1r9m/IoQX8YEj+t2JwCX+PsT7ojtWH8EIaCJmIo+FQeaxJHs9LBbPkGIt4ilQxjxi8ajj+BgZztra8P8MBcUAi2LCdGXJKsWADgTozeppeuoXJXEPKXfM0FANnDaC7qtlaNbfyq8Uep/rXQYDUvm0M6XKyb6sPPuvdwm5x9wo4dO6j4BoilN6H4pmTiAAAAAElFTkSuQmCC);background-position:center;-webkit-background-size:48px 48px;background-size:48px 48px;position:absolute;top:0;bottom:0;left:0;right:0}Yukarıdaki video kodu gibi aşağıdaki AMP HTML kodu blog yayınlarınıza ekleyerek Youtube videolarınızı paylaşabilirsiniz.
AMP HTML
<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="Kapat">
<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="video-img" id="btn-play" on="tap:video.show, video.play, btn-play.hide,open-video" role="button" tabindex="0" aria-label="Video Oynat">
<amp-img alt="Video" src="https://i.ytimg.com/vi/P2YpKF1roDk/maxresdefault.jpg" width="637" height="356" layout="responsive"></amp-img>
<div class="playonimage"></div>
</div>Yukarıdaki AMP HTML kod içerisinde belirtilen video ve resim ID'sini değiştirerek videolarınızı paylaşabilirsiniz.
Bknz: Blogger Mobil URL'leri AMP Uyumlu Hale Getirme
Bu yazımızda AMP HTML blog yayınlarında AMP uyumlu AMP Lightbox video paylaşım eklentisini paylaştık. Yayın ile ilgili soru ve görüşleriniz için yorum formunu kullanabilirsiniz.
COMMENTS