Lazy load iframe video using IntersectionObserver

 Here is the below code that will load the iframe video when it iframe will be in the viewport.
It is important that to fill the page i have used image tag with width and height.
You can use your own data.

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy load iframe video using IntersectionObserver</title>
</head>
<body>
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    <br/><img width="500" height="500" src="https://imgd.aeplcdn.com/1056x594/n/cw/ec/185315/jupiter-right-side-view-16.jpeg?isig=0&q=80" alt="Sample Image">
    
  <iframe allowfullscreen="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin" title="Title" url-src="PUT-YOUYUBE-VIDEO-LINK-HERE"
  id="widget2" data-gtm-yt-inspected-5="true" width="640" height="360" frameborder="0"></iframe>

  <script>
  const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const iframe = entry.target;
      //iframe.src = iframe.dataset.src; // Assume if you use data-src for youtube link
      iframe.src=iframe.getAttribute('url-src');
      observer.unobserve(iframe);
    }
  });
});
const iframes = document.querySelectorAll('iframe[url-src]');
iframes.forEach(iframe => {
  observer.observe(iframe);
});
</script>
</body>
</html>

 

 

 

 

 

 

 

Fore more, continue here...

Auto execute code in javascript

How to write auto execute javascript code ?

We can achieve it by 2 method.

1- Standard auto execute function.

2- Arrow function.

Standard auto execute function.

<script>
(function() {
  const iamvar1= 'Iam var 1';
  console.log('Auto Execute 1 function');
})();
</script>

Arrow function.

<script>
(()=> {
  const iamvar2= 'Iam var 2';
  console.log('Auto Execute 2 function');
})();

</script>

Fore more, continue here...

Passing value in Shopify snippets and use it

You are working on Shopify project with a snippet. In that snippet you want pass value as per your need. So how can you achieve it ?

Let assume that you will use a snippet "rimg-a.liquid" in other liquid file and want to use as below. You want to pass imgurl, class and fetch value.

================================================

content of any liquid file or theme.liquid file in where you want to use rimg-a.liquid snippet file

include 'rimg-a',
        imgurl: 'URl-IMAGE',
        class: 'feature-mobile',
        fetch: 'yes'

================================================

content of rimg-a.liquid file

  <img  {% if fetch != blank %} fetchpriority="high" decoding="async" {% endif %} 
    {% if imgurl != blank %}
        src="{{ imgurl | split:'?' | first | replace: '2078x2233','390x419' }}"
    {% endif %}
    {% if class != blank %}class="{{ class }}"{% endif %}
  >

 

 

 

 

 

Fore more, continue here...

Change video tag source url using Javascript

You want change <video> tag's <source></source> src when click on button in HTML and Javascript.
Here is the code with example



<video autoplay="autoplay" control="false" id="howto" loop="loop" muted="muted" playsinline="playsinline" poster="POSTER IMAGE URL" preload="metadata">
  <source asrc="MP4 URL" id="howtosource" type="video/mp4"></source>
  <img src="PSTER IMAGE URL" />
</video>

<a class="button" href="#" onclick="dook();">▷ Play Video Now</a>
 
<script>
  const dook = () => {
    const howto = document.getElementById("howto");
    const howtosource = document.getElementById("howtosource");
    const newSource = howtosource.getAttribute("asrc");
    howtosource.setAttribute("src", newSource); h
    owto.load();
    howto.play();
  };
</script>  

Fore more, continue here...

Unable to resolve Try checking the for validity Google Pagespeed Insights

Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights

 

You have a website and want to test it's pagespeed performance score at Google Pagespeed Insights test tool. You simply enter the website link and click on analysis to show the speed score result. But after few second you see the error "Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights". You wondering and doubt that is really the website URL existing or not? So for cross checking you enter the website link in browser and see the website is loading.

So now the question is why Google Pagespeed Insight show "Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights" error in result even website is existing?

It is due to too much slow your website. There are some timeout limit in Google Pagespeed test. if your website fetch in that limits time then speed score show else the error "Unable to resolve <website url> Try checking the for validity Google Pagespeed Insights" will show.

So to overcome this problem you need to increase your website speed, so Google Pagespeed Insights able to fetch it and show speed score result.

Fore more, continue here...

My Services

 

My Services

I am expert in Genuine Website Speed Optimization (Guaranteed REAL Pagespeed Performance 70-90+ Score ), On Page SEO, Off Page SEO, Improve Core Web Vitals, Technical SEO, Website development, Desktop app/software development, Secure website from Hacker, Removing Malware Virus, Debugging, Bug fixing and Data Science. Please contact me for below services.

My services are below :

Genuine & Ethical website speed optimization

Guaranteed Genuine Page Speed Performance 70-80-90+ range score.
I will provide you my Suggestions/Changes to get Guaranteed Genuine 70-80-90+ Range PageSpeed Performance score for your website's homepage at Google PageSpeed Insights.
I have confidently improved many complex website's speed. I know how to improve website speed without install speed plugin/app/extension. If you used many speed plugin/app and professional and still not getting Google PageSpeed Score which you want then contact me for speed of any type website. Please contact me to improve Speed or CORE WEB VITALS of below platform's website:
PHP | SHOPIFY | WORDPRESS | BIGCOMMERCE | MAGENTO | WEBFLOW | WIX | HUBSPOT | SQUARESPACE | BLOGSPOT BLOGGER | WEEBLY | CLICKFUNNEL | ADOBE MUSE | OPENCART | CS CART | PRESTASHOP | MAGENTO | DRUPAL | JAVA | JOOMLA | KAJABI | LIGHTSPEED | MODx | NETO MAROPOST | NODEJS | REACTJS | NEXTJS | BOOTSTRAP | ASP.NET | LARAVEL | CODEIGNITER | Yii | SHOPWARE | SHOPWIRED | VBULLETIN | STATIC HTML Website & And many more platform.

Core Web Vitals

Contact me for improvement of CORE WEB VITALS score of below metrics:
1- First Contentful Paint- FCP
2- Largest Contentful Paint LCP
3- Cumulative Layout Shift - CLS
4- Interaction to Next Paint - INP
5- First Input Delay - FID
6- Time To First Byte - TTFB
7- Total Blocking Time - TBT
8- Google Search Console.

 

White Hat SEO, Technical SEO

Off Page SEO, On Page SEO and Technical SEO or Digital Marketing of any type website, Software, Brands. channel etc. I only do White Hat SEO. 

 

 

 

Fore more, continue here...

Find lost Android Mobile’s location

 Find lost Android Mobile’s location

You have Android mobile and suddenly you lost it then how to find it’s location and Play sound in it so you can find it. here is the some steps:

1- Log on using laptop or any other device at https://www.google.com/android/find

2- After login you will see all the lists of Mobile Devices.

3- Now you can choose any one mobile device which is lost

4- Now you will see 3 options:

A- Play sound
B- Secure device
C- Factory reset device

5- Click on anyone which is suited for you.

Fore more, continue here...

Simple Class in JavaScript

Simple Class in JavaScript

Here is the below code that demonstrate that how to create class and how to use it.

<script>
class WORKER {
    #step1(){console.log("RUN step1");}
    #step2(){console.log("RUN step2");}
    #step3(){console.log("RUN step3");}
    #step4(){console.log("RUN step4");}
    #step5(){console.log("RUN step5");}
    init() {
        this.#renderHTMLFromURL();
    }
    #renderHTMLFromURL = () => {
        this.#step1();
    this.#step2();
    this.#step3();
    this.#step4();
    this.#step5();
    }
}
new WORKER().init();
</script>

Fore more, continue here...

Run multiple tasks one by one in javascript

 Run multiple tasks one by one in javascript

 

 Here is the code in JavaScript code that demonstrate how to run multiple tasks one by one.

<script>
const one=()=>{console.log(“I am function One”);}
const two=()=>{console.log(“I am function Two”);}
const three=()=>{console.log(“I am function Three”);}
const four=()=>{console.log(“I am function Four”);}
const yieldToMainThreadWork =()=> {
return new Promise(resolve => {
setTimeout(resolve, 2500);
});
}
//async function runAll () {
const runAll = async ()=>{
const tasks=[one,two,three,four];
while (tasks.length > 0) {
const task = tasks.shift();
task();
await yieldToMainThreadWork();

}
}
runAll();
</script>

 

Fore more, continue here...

Add Dependent Scripts

 

 here is the code that allow to add dependent script :

 

 

    <script>
        const addDependentScripts = async function( scriptsToAdd ) {
        const s=document.createElement('script')
        for ( var i = 0; i < scriptsToAdd.length; i++ ) {
            let r = await fetch( scriptsToAdd[i] )
            s.text += await r.text()
        }
        document.querySelector('body').appendChild(s)
        }
         </script> 

Uses as below :

       <script>

    try {
        addDependentScripts( [
            "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
            "https://cdn.mywebshopapp.com/test/a1.js",
            "https://cdn.mywebshopapp.com/test/a2.js",
            "https://cdn.mywebshopapp.com/test/a3.js",
            "https://cdn.mywebshopapp.com/test/a4.js"
        ] );
        }
        catch (err) { }

       </script>

Fore more, continue here...