Struggling To Load Youtube Player On-demand Rather Than Traditional Embed
I am trying to speed the load time of my site. I have a Youtube video that is embedded with traditional IFRAME. I found this article, but it doesn't seem to work for me. I must be doing something wrong,
http://www.labnol.org/internet/light-youtube-embeds/27941/
I added the JS and CSS to my site properly (my wordpress theme has a built in area for my to paste it). I added the HTML to the container where I want the video to appear, and I changed the VIDEO-ID as per the instructions. There is now just a blank area where the video should be, but when you hover over it you can see it is linked based on your cursor. When you click it, nothing happens.
I am testing it on this page... the video should appear in the upper fold to the right of the picture of the man:
https://www.yogabearpc.com/laptop-repair/
If anyone can figure this out I would be greatly appreciative
Answer
You have your javascript bad written. You have 2 <script>
tags:
<script id="mfn-dnmc-custom-js" type="text/rocketscript">
//<![CDATA[
<script>
(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = labnolThumb(v[n].dataset.id);
p.onclick = labnolIframe;
v[n].appendChild(p);
}
})();
[...]
</script>
//]]>
</script>
When you input your custom javascript into your 'special builtin area', you don't need to add the <script>
and </script>
tags, the theme will do that for you.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM