Adding audio, video (including YouTube, Vimeo, Snapchat, etc.) and full-blogging (and other advanced functionality) gives a whole new flavor to your Solo Build It! site. This is the place to help or be helped for these topics.

Moderator: Paul from Somewhere, out there...

#1385912 by Elly from
Wed Nov 08, 2017 12:11 pm

Hello coding elves! :-)

I have used the light youtube video codes. There are three parts to it: CSS

Code: Select all/* -- YOUTUBE -- */
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;

    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;

    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;

    .youtube-player img:hover {
        -webkit-filter: brightness(75%);

    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//") no-repeat;
        cursor: pointer;

Code: Select all<script>document.addEventListener("DOMContentLoaded",function(){var div,n,v=document.getElementsByClassName("youtube-player");for(n=0;n<v.length;n++){div=document.createElement("div");div.setAttribute("data-id",v[n];div.innerHTML=labnolThumb(v[n];div.onclick=labnolIframe;v[n].appendChild(div);}});function labnolThumb(id){var thumb='<img src="">',play='<div class="play"></div>';return thumb.replace("ID",id)+play;}function labnolIframe(){var iframe=document.createElement("iframe");var embed="";iframe.setAttribute("src",embed.replace("ID",;iframe.setAttribute("frameborder","0");iframe.setAttribute("allowfullscreen","1");this.parentNode.replaceChild(iframe,this);}</script>

and a local code on the page:
Code: Select all<div class="youtube-player" data-id="OHl7BewJ0yU"></div>

Unfortunately, it doesn't work on some pages and I have no idea why.

Here's where it works:
Here's where it doesn't:

I would be most grateful if anyone can figure out what the problem is.

Thank you so much in anticipation. :-)

Last edited by Debs from SiteSell on Wed Nov 08, 2017 3:50 pm, edited 1 time in total. Reason: Moved from Coding, etc. to here.
#1385915 by Elly from
Wed Nov 08, 2017 1:07 pm
Hi Juri,

Thank you for taking a look at this. :-)

Oops, that's an obvious one. :-(

What about this example, available on Youtube here:, but not working here:

(Worried now that it's also something smacking me in the face! :roll: )

Similar Topics Statistics Last post
Table of Youtube Videos Embedded
by Josh from Benavides Tue May 16, 2017 10:40 pm
2 Replies
by Paul from Somewhere, out there...
Mon May 22, 2017 1:25 pm
YouTube, Facebook and Vimeo video settings for website
by Laurent from Montreal Fri Oct 27, 2017 4:48 pm
1 Replies
by Debs from SiteSell
Fri Oct 27, 2017 6:37 pm
High Quality Videos: Video Resolutions, Sony Vegas and Vimeo Settings
by Christophe from Belgium Fri Jul 28, 2017 8:56 am
2 Replies
by Christophe from Belgium
Sat Jul 29, 2017 11:46 am
Captions/transcripts for embedded youtube videos (FOR THE ENGINES)
by Titani from Lumbadzi Mon May 08, 2017 8:24 am
2 Replies
by Paul from Somewhere, out there...
Thu May 11, 2017 11:38 am
What do you think the future holds for monetising Youtube videos?
by Mike from England Sun Feb 11, 2018 9:08 pm
1 Replies
by Debs from SiteSell
Fri Feb 16, 2018 3:49 pm

Users browsing this forum: No registered users and 2 guests