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 Mollymook Beach, NSW

#1385912 by Elly from professional-counselling.com
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("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }
,

Javascript:
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].dataset.id);div.innerHTML=labnolThumb(v[n].dataset.id);div.onclick=labnolIframe;v[n].appendChild(div);}});function labnolThumb(id){var thumb='<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',play='<div class="play"></div>';return thumb.replace("ID",id)+play;}function labnolIframe(){var iframe=document.createElement("iframe");var embed="https://www.youtube.com/embed/ID?autoplay=1";iframe.setAttribute("src",embed.replace("ID",this.dataset.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: https://www.professional-counselling.com/nervous-breakdown.html
Here's where it doesn't: https://www.professional-counselling.com/dealing_with_criticism_rejection.html

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

Thank you so much in anticipation. :-)

Elly
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 professional-counselling.com
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: https://www.youtube.com/watch?v=BESvQB6J5rc&t=41s, but not working here: https://www.professional-counselling.com/signs-of-an-abusive-relationship.html

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

Elly
Similar Topics Statistics Last post
Captions/transcripts for embedded youtube videos (FOR THE ENGINES)
by Titani from Lumbadzi Mon May 08, 2017 8:24 am
2 Replies
491 Views
by Paul from Mollymook Beach, NSW
Thu May 11, 2017 11:38 am
YouTube, Facebook and Vimeo video settings for website
by Laurent from Montreal Fri Oct 27, 2017 4:48 pm
1 Replies
180 Views
by Debs from SiteSell
Fri Oct 27, 2017 6:37 pm
Videos for Youtube - why, how, where?
by David from California Fri Dec 30, 2016 3:23 pm
3 Replies
1301 Views
by Paul from Mollymook Beach, NSW
Sun Jan 01, 2017 3:39 am
YouTube video uploaded has awful resolution
by David from California Thu Dec 29, 2016 7:13 pm
3 Replies
1111 Views
by Paul from Mollymook Beach, NSW
Fri Dec 30, 2016 8:35 pm
Table of Youtube Videos Embedded
by Josh from Benavides Tue May 16, 2017 10:40 pm
2 Replies
677 Views
by Paul from Mollymook Beach, NSW
Mon May 22, 2017 1:25 pm

Users browsing this forum: No registered users and 2 guests