sexta-feira, 19 de agosto de 2016

Video Popup Jquery responsive Iframe

i-frame-responsive-jquery-video-popup-code

Hoje vamos apresentar Jquery video popup Iframe responsive, isso traz um carregamento otimizado de videos dentro de um Iframe especial para aqueles que desejam exibir videos por popup é possivel adicionar videos da plataforma  do youtube e tambem vimeo é uma forma de interagir o que é melhor isso carrega melhor e também não deixa o blog pesado é altamente responsive preparado para disposivitos moveis se deseja adicionar no blog siga os passos abaixo: Creditos Codeodex


Adicionando Video popup Jquery responsive Iframe 

Faça login no Blogger então va em
menu modelo então editar HTML/JavaScript com as teclas CTRL+F
busque por </head> acima disso copie e cole o seguinte código CSS:


<style type='text/css'>
/*Pop Up Responsive*/
.container{margin:100px auto}
.btnnya{background-color:#039be5;border:0;border-radius:2px;box-shadow:none;color:white!important;;cursor:pointer;display:inline-block;font:500 14px/20px Roboto,sans-serif;margin:0;min-width:36px;outline:0;overflow:hidden;padding:8px;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;transition:background-color .2s,box-shadow .2s;vertical-align:middle;white-space:nowrap;padding:7px 16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
.btnnya.yt{background-color:red}
.wmBox_overlay{position:fixed;width:100%;height:100%;display:none;top:0;left:0;background:rgba(0,0,0,0.5);z-index:999}
.wmBox_centerWrap{display:table;position:absolute;width:100%;height:100%}
.wmBox_centerer{display:table-cell;vertical-align:middle}
.wmBox_centerer iframe{width:95%;display:table;margin:0 auto;position:relative}
.wmBox_contentWrap{width:50%;margin:0 auto;position:relative}
.wmBox_scaleWrap{position:relative;height:0;padding-top:20px;padding-bottom:56.25%;width:100%}
.wmBox_centerer iframe{position:absolute;top:0;border:0;outline:0;box-shadow:0 0 10px rgba(0,0,0,0.5);left:0;width:100%;height:100%;padding:12px;background:black;border-radius:12px}
.wmBox_closeBtn{z-index:2;position:relative;margin-top:-40px}
.wmBox_closeBtn p{line-height:0;margin:0;padding:0.5em 0 0.75em;color:#FFF;background:#000;width:1.3em;font-size:25px;border-radius:100%;text-align:center;font-family:Verdana,serif;position:relative;bottom:-0.5em;right:-1.5em;cursor:pointer;float:right;box-shadow:0 0 10px rgba(0,0,0,0.5);transition:color 0.2s ease-out,background 0.2s ease-out}
.wmBox_closeBtn p:hover{background:#FFF;color:#000}
</style>

Então procure por </body> e acima disso copie e cole o código:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$.wmBox()}),function(o){o.wmBox=function(){o("body").prepend('<div class="wmBox_overlay"><div class="wmBox_centerWrap"><div class="wmBox_centerer">')},o("[data-popup]").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeIn(750);var a=o(this).attr("data-popup");o(".wmBox_overlay .wmBox_centerer").html('<div class="wmBox_contentWrap"><div class="wmBox_scaleWrap"><div class="wmBox_closeBtn"><p>x</p></div><iframe src="'+a+'">'),o(".wmBox_overlay iframe").click(function(o){o.stopPropagation()}),o(".wmBox_overlay").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeOut(750)})})}(jQuery);
//]]>
</script>

Salve.

Quando for postar o video siga os passos conforme a figura:

post-mode-html-responsive-jquery-iframe-video



Copie e cole o seguinte código: 



  <div class="container">
    <a class="wmBox btnnya yt" href="#" data-popup="https://www.youtube.com/embed/nij9XzAwyk?rel=0&amp;controls=0&amp;showinfo=0">Youtube Video</a>
  </div>

Substitua a url do Video pela url do video que deseja mostrar.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

2 comentários:

Alexandre Silvaツ disse...

Esse codigo não está funcionando poderia me ajudar? valeu (y)

Myblogger SEO disse...

Alexandre envie nos no nosso email que eu te ajudo criarumblogger@gmail.com abraço

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner