Adding JavaScript and CSS
-
Hi,
I have a question and perhaps you can help me. I need to add two snippets. In examples below I did not include all lines only few starting and finishing lines.
How do I correctly add a snippet? I tried copying the entire Javascript and CSS like in the instructions here: https://www.labnol.org/internet/light-youtube-embeds/27941/ This are helpful instruction for inserting YouTube videos and reducing page size and load speed.
1. Place the JavaScript anywhere in your web template. It finds all embedded videos on a web page and then replaces the DIV elements with the video thumbnails.
It starts with:
1. <script>
2.
3. /* Light YouTube Embeds by @labnol */
4. /* Web: http://labnol.org/?p=27941 */
5.
6. document.addEventListener(“DOMContentLoaded”,
7. function() {and ends with:
32. }
33.
34. </script>2. Finally, paste the CSS before the closing head tag of your web template.
It starts with:
1. <style>
2. .youtube-player {
3. position: relative;and ends with:
54. cursor: pointer;
55. }
56.
57. </style>Can you please let me know whether to include <script>, </script>, <style>, </style>, etc. or what do I leave out.
Thank you very much.
Adrian
-
I would like to see CSS and JS natively added to Code Snippets as well. For now I use this, maybe it helps you:
I am planning on adding native CSS and JavaScript support at some point. The biggest difficulty is working out how to integrate them into the existing interface in a way that does not make this plugin even more confusing to operate.
As for your situation, you will need to wrap your CSS and JavaScript code in some WordPress action hooks, as currently this plugin only supports PHP code that is executed in the same way as plugins. Here’s an example of how that snippet might look:
add_action( 'wp_head', function () { <style> /* CSS code goes here */ </style> <?php } ); add_action( 'wp_footer', function () { ?> <script> /* JavaScript code goes here */ </script> <?php } );I had an idea on how to keep this simple and effective:
Please don’t mind my math not adding up though! 😀
The topic ‘Adding JavaScript and CSS’ is closed to new replies.
