Amp youtube play on click dengan

.

.

play video on click degan


Hoje vamos compartilhar um tutorial por kompiajaib isso traz um efeito bem interessante uma vez que também economiza espaço no post do Blogger aparece o botão com evento on click uma vez que ele se abre para o play do video se você deseja adicionar siga os passos abaixo.


Adicionando o efeito.

faça login no template do blogger então va no menu
tema editar HTML com as teclas combinadas CTRL+F busque por </head> ou &lt;/head&gt;&lt;!--<head/>- e antes disso copie e cole o seguinte código:

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

Em seguida adicione o CSS no seu blog acima de ]]></skin> ou </style>

.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://1.bp.blogspot.com/-DpJGZ47Olck/WSkXyTDP1kI/AAAAAAAArQQ/UwIxH4hYRIkbgZkN0_mUrkK12HveGFsXACLcB/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;}

salve e pronto.


Em seguida no post clique na aba HTML ao lado de escrever e cole o seguinte código:

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

Escolha o video que deseja e substitua pelo id do video publique e pronto.