Header ads

Youtube AMP Lightbox Plugin

Youtube AMP Lightbox Plugin


Youtube AMP Lightbox is a new feature that prevents loading delays of Youtube videos added to blogs and websites and changes the Youtube video image without affecting the page loading speed.

This, the Youtube AMP video box opens with the backlight effect that covers the entire page of the video when visitors click on the video play button. Your Youtube videos shared in this way will attract more visitors and receive clicks.

This plugin offers more options for presenting video content in AMP HTML blog posts.

How to Install AMP-Youtube Video Plugin?


To install the amp-youtube video plugin on your AMP HTML blog, follow the steps below.

Check for the following amp javascript codes among the codes of your AMP HTML template. If javascript codes are included in the template codes, you don't need to add them again, if not, add the following javascript codes </head>or &lt;/head&gt;&lt;!--<head/>--&gt;code on a line.

amp-youtube and 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 button: It

is displayed only as a button between your blog posts and opens with backlight effect when clicked. It also provides videos to be more prominent and easy to watch.


Add the following CSS codes to the amp-customstyle file on your template editor page .


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}

Save the template after completing the above steps.

You can share your Youtube videos by adding the AMP HTML code below to your blog posts.


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>;

You can share your videos by changing the video ID specified in the AMP HTML code above.

AMP-Youtube Google+ style: It

provides the visitors to watch the videos more easily with the appearance of the Youtube videos displayed on Google+ pages, which is the same as the image shape and expands with a black backlight effect when clicked.


If you want to install, amp-customadd the following CSS codes to the style file and save the template.


this article, we shared the AMP compatible AMP Lightbox video sharing plugin in AMP HTML blog postsYou can use the comments form for your questions and opinions about the publication.

PIC SOURCE: GOOGLE PIC
ARTICLE WRITING BY NILESH SHEKH 
YOUTUBE, AMP

Post a Comment

0 Comments