youtube & video image placeholder
15 Jul

Youtube & Vimeo Responsive image placeholder

Youtube & Vimeo Responsive image placeholder. (Script per evitare il caricamento onLoad di iframe video.)

Codice JS

$('.vimeo a,.youtube a').click(function (e) {
    e.preventDefault();
    var videoLink = $(this).attr('href');
    var classeV = $(this).parent();
    var PlaceV = $(this).parent();
    if ($(this).parent().hasClass('youtube')) {
        $(this).parent().wrapAll('<div class="cntVid">');
        $(PlaceV).html('<iframe frameborder="0" height="333" src="' + videoLink + '?autoplay=1&showinfo=0" title="YouTube video player" width="547"></iframe>');
    } else {
        $(this).parent().wrapAll('<div class="cntVid">');
        $(PlaceV).html('<iframe src="' + videoLink + '?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;color=ffffff" width="500" height="281" frameborder="0"></iframe>');
    }
});

Codice CSS:

.non_ha_importanza {
    padding:20px 120px
}
.cntVid, figure.vimeo, figure.youtube {
    margin:0;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
.cntVid iframe, figure.youtube a img, figure.vimeo a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
figure.vimeo a:after, figure.youtube a:after {
    content:"";
    width:60px;
    height:60px;
    background:#000;
    z-index:9;
    position:absolute;
    top:50%;
    left:50%;
    margin:-30px 0 0 -30px;
    border-radius:50px;
    border:3px solid #fff;
    opacity:0.4
}
figure.vimeo a:before, figure.youtube a:before {
    content:"";
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #fff;
    z-index:10;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-2px;
    margin-top:-10px;
    display:block;
}
figure.vimeo a:hover img, figure.youtube a:hover img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}
figure.vimeo a img, figure.youtube a img {
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    a -webkit-transform: scale(1);
    transform: scale(1);
}

Codice HTML:

<div class="non_ha_importanza">
    <figure class="youtube"> <a href="http://www.youtube.com/embed/Jc9ghjM_cos?autoplay=1&showinfo=0">
        <img src="http://www.sicky.net/full1.jpg" alt="quello che vuoi tu" />
    </a>
    </figure>
 <br>
    <figure class="vimeo"> <a href="http://player.vimeo.com/video/45389248?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;color=ffffff">
        <img src="http://www.sicky.net/full2.jpg" alt="quello che vuoi tu" />
    </a>
    </figure>
</div>

Link al mio script

One Response to Youtube & Vimeo Responsive image placeholder

  1. Michel says:

    The problem with autostart especially on mobile is not resolved.
    Thanks for sharing

Leave a Reply to Michel Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>