Amp-Youtube Play On Click Using Button
Amp-Youtube Play On Click Using Button - How to make an amp-youtube Play On Click with this button is another alternative to display Youtube videos inside AMP blog post by adding buttons for dark theme or other word selection by adding button turn off lights so visitors will be more focus to video.
This is the same as the lightbox effect I previously shared, but here it does not directly use the lightbox when the play button is clicked, but uses the lights out button to activate the lightbox. And when the video play button is clicked, the video will be displayed on the top side of the screen with use action scroll to top.
When the button is clicked, then Youtube video will be displayed with automatic play but not yet use lightbox. And the lightbox can be displayed by clicking the lights out button in the lower left corner of the video. That way visitors can more focus to watch the video displayed. If you want to continue reading the article, then the visitor just turn on the lights again by clicking the button on the bottom left of the video.
Here I make 2 pieces of tricks that use the button and that use video thumbnail to click play video.
1. Play amp-youtube on click Button
Please save the following 2 js above the code </head> or </head><!--<head/>--> and if it turns out in your blog template already there are both js, please step this step. Or if there is already js from one of them, then please equip with other js again.
Then please add the following CSS on the custom-amp style of your blog.
Then please use the following HTML code in the post in HTML mode.
You just adjust the Youtube video ID to the code I marked above.
2. Play amp-youtube on click Thumbnail
Please save the following 2 js above the code </head> or </head><!--<head/>--> and if it turns out in your blog template already there are both js, please step this step. Or if there is already js from one of them, then please equip with other js again.
Then please add the following CSS on the custom-amp style of your blog.
Then please use the following HTML code in the post in HTML mode.
You just adjust the Youtube video ID for video and video thumbnails in the 2 codes I marked above.
With this we can display Youtube video in post AMP become more interesting. That's an article I can share about amp-youtube Play On Click with buttons, hopefully with this short enough article, it can be useful and useful for us, good luck.
This is the same as the lightbox effect I previously shared, but here it does not directly use the lightbox when the play button is clicked, but uses the lights out button to activate the lightbox. And when the video play button is clicked, the video will be displayed on the top side of the screen with use action scroll to top.
When the button is clicked, then Youtube video will be displayed with automatic play but not yet use lightbox. And the lightbox can be displayed by clicking the lights out button in the lower left corner of the video. That way visitors can more focus to watch the video displayed. If you want to continue reading the article, then the visitor just turn on the lights again by clicking the button on the bottom left of the video.
Here I make 2 pieces of tricks that use the button and that use video thumbnail to click play video.
1. Play amp-youtube on click Button
Please save the following 2 js above the code </head> or </head><!--<head/>--> and if it turns out in your blog template already there are both js, please step this step. Or if there is already js from one of them, then please equip with other js again.
<script async='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>
Then please add the following CSS on the custom-amp style of your blog.
.center,.video-box{text-align:center}
.video-box{width:100%;max-width:800px;margin:0 auto;position:relative;}
.btn-play{color:#fff;background-color:#D32F2F;padding:10px 16px 10px 40px;position:relative;font:500 18px Roboto,sans-serif;line-height:1.3333333;border-radius:6px;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9I0wQ2J46j3oPl46J_Tq_Si3ICRfRZxHyR5FeCSJ0EtgcA7V8VBG7dFThO2Hu5w7U7P66nOk4lr5c6G3rG_txHQ4rZGs-qRbUl-IEi3D8zBrS8UJjvPK-EXmDdh_pI1q04iUxPxbZ-8jo/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}
amp-lightbox#open-lightbox{z-index:998}
amp-youtube{z-index:999}
.lightbox-video{background:rgba(0,0,0,.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:998}
.lightbox-toggle{background:rgba(255,255,255,.8);color:#333;font-size:80%;padding:0 5px;height:25px;line-height:25px;position:absolute;bottom:0;left:0;z-index:999;cursor:pointer;border-radius:0 4px 0 0;}
.lightbox-toggle svg{vertical-align:-3px;}
Then please use the following HTML code in the post in HTML mode.
<div id="video-top"></div>
<div class="video-box">
<amp-youtube id="video" data-videoid="AO0gDX89Tog" 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>
<amp-lightbox id='open-lightbox' layout='nodisplay'>
<div class='lightbox-video' hidden='' id='lightbox-video'></div>
</amp-lightbox>
<div class='lightbox-toggle' hidden='' id='lightbox-open' on='tap:lightbox-video.toggleVisibility,open-lightbox,lightbox-open.hide,lightbox-close.show,video-top.scrollTo("position" = "top")' role='button' tabindex='0'><svg height='16' viewBox='0 0 24 24' width='16'><path d='M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z' fill='#000000'/></svg></div>
<div class='lightbox-toggle' hidden='' id='lightbox-close' on='tap:lightbox-video.toggleVisibility,open-lightbox.close,lightbox-open.show,lightbox-close.hide' role='button' tabindex='0'><svg height='16' viewBox='0 0 24 24' width='16'><path d='M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z' fill='#000000'/></svg></div>
</div>
<div class="center">
<button id="btn-play" class="btn btn-play" on="tap:video.show, video.play, btn-play.hide, video-top.scrollTo('position' = 'top'),lightbox-open.show" aria-label="Play Video">Play Video</button>
</div>
You just adjust the Youtube video ID to the code I marked above.
2. Play amp-youtube on click Thumbnail
Please save the following 2 js above the code </head> or </head><!--<head/>--> and if it turns out in your blog template already there are both js, please step this step. Or if there is already js from one of them, then please equip with other js again.
<script async='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>
Then please add the following CSS on the custom-amp style of your blog.
.video-box,.video-img{width:100%;margin:0 auto;text-align:center;position:relative}
.video-box{max-width:800px}
.video-img{max-width:600px}
.playonimage{cursor:pointer;margin:auto;width:56px;height:56px;-webkit-border-radius:50%;border-radius:50%;background-color:rgba(0,0,0,.2);background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl-Hwrd21XXfOgjEoxB1S_Bqtr0tuP5iV7raKRkwBE4aqk5uMQZXNjWQhnFkw0y-tqet5d1QuOlI1sfCf4-VKPxFuRty141prclwuukXDISfs9FYHdt4ciwUybDpQpUb-q78eEd0RZUnQV/s1600/play_circle_filled_white_48dp.png);background-position:center;-webkit-background-size:48px 48px;background-size:48px 48px;position:absolute;top:0;bottom:0;left:0;right:0}
amp-lightbox#open-lightbox{z-index:998}
amp-youtube{z-index:999}
.lightbox-video{background:rgba(0,0,0,.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:998}
.lightbox-toggle{background:rgba(255,255,255,.8);color:#333;font-size:80%;padding:0 5px;height:25px;line-height:25px;position:absolute;bottom:0;left:0;z-index:999;cursor:pointer;border-radius:0 4px 0 0;}
.lightbox-toggle svg{vertical-align:-3px;}
Then please use the following HTML code in the post in HTML mode.
<div id="video-top"></div>
<div class="video-box">
<amp-youtube id="video" data-videoid="AO0gDX89Tog" 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>
<amp-lightbox id='open-lightbox' layout='nodisplay'>
<div class='lightbox-video' hidden='' id='lightbox-video'></div>
</amp-lightbox>
<div class='lightbox-toggle' hidden='' id='lightbox-open' on='tap:lightbox-video.toggleVisibility,open-lightbox,lightbox-open.hide,lightbox-close.show,video-top.scrollTo("position" = "top")' role='button' tabindex='0'><svg height='16' viewBox='0 0 24 24' width='16'><path d='M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z' fill='#000000'/></svg></div>
<div class='lightbox-toggle' hidden='' id='lightbox-close' on='tap:lightbox-video.toggleVisibility,open-lightbox.close,lightbox-open.show,lightbox-close.hide' role='button' tabindex='0'><svg height='16' viewBox='0 0 24 24' width='16'><path d='M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z' fill='#000000'/></svg></div>
</div>
<div class="video-img" id="btn-play" on="tap:video.show, video.play, btn-play.hide, video-top.scrollTo('position' = 'top'),lightbox-open.show" role="button" tabindex="0" aria-label="Play Video">
<amp-img alt="Video" src="https://i.ytimg.com/vi/AO0gDX89Tog/mqdefault.jpg" width="637" height="356" layout="responsive"></amp-img>
<div class="playonimage"></div>
</div>
You just adjust the Youtube video ID for video and video thumbnails in the 2 codes I marked above.
With this we can display Youtube video in post AMP become more interesting. That's an article I can share about amp-youtube Play On Click with buttons, hopefully with this short enough article, it can be useful and useful for us, good luck.
Post a Comment for "Amp-Youtube Play On Click Using Button"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog