the content must be served over HTTPS.

@Sinnbeck I don't know what's the reason of errror, but I am using https:// not http:// as url I dont know where http:// is coming The code is running successfully in the local host and in hostinger server. But when I migrate it to siteground server it is not working

@alya_alsiyabi I mean you gave https://www.youtube.com/watch?v=hZV0U6fi8YM but it complains about http://www.youtube.com/embed/hZV0U6fi8YM?autoplay=1

There must be some code that transforms it, that you aren't showing?

@Sinnbeck yes sir something from jQuery js. This one: *! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */

@thinkverse lol didn't even notice

@thinkverse I tried that but it is not working sir

@alya_alsiyabi You have a click event on the link, that triggers some JavaScript to open the video in an overlay. I'm certain the issue lies in that JavaScript because it's after that event is fired and the overlay is loaded it throws and error about mixed content. So dive into your JavaScript and see what it does after it grabs the URL.

@alya_alsiyabi it seems the jQuery plugin you use loads YouTube in the iframe using http - likely due to the plugin not adding a specific protocol - according to the documentation for Magnific Popup you can add options to extend it, so why not try overwriting the YouTube pattern and adding an https protocol to it and see if that fixes the mixed content error.

$('.video').magnificPopup({
  type: 'iframe',
  iframe: {
    patterns: {
        index: 'youtube.com',
        id: 'v=',
        src: 'https//www.youtube.com/embed/%id%?autoplay=1'
      }
    }
  }
});

This question is not a Laravel one so consider updating the channel to JavaScript by editing the original question and selecting JavaScript in the drop-down. 👍

@thinkverse sir .video as variable is not defined aboutus:2 Uncaught ReferenceError: $ is not defined at aboutus:2:1 ok I changed it to javascript

@alya_alsiyabi then be more specific in your selector if you have more than one element with the class video.

$('a.video.video-popup.mfp-iframe').magnificPopup({
    type: 'iframe',
    iframe: {
        patterns: {
            index: 'youtube.com',
            id: 'v=',
            src: 'https//www.youtube.com/embed/%id%?autoplay=1'
        }
    }
});

Uncaught ReferenceError: $, strange you clearly have jQuery on your site and I can access jQuery via $ in the console.

I did have an extra } in the example before so I fixed that.

@thinkverse I tried all of the classes , but they still not recognizing the variable ,I tried it also with id not working > is there a way to know the name of class by the way when I use this tag the video is working ifram src=""

@alya_alsiyabi format your code blocks

@alya_alsiyabi well, it's clearly an anchor tag with the following classes video video-popup mfp-iframe, as per your snippet. So the selector 'a.video.video-popup.mfp-iframe' should grab the correct element if it's on the page.

And I do have to apologize I did miss one part in the options object, I missed the youtube key and missed a colon in the protocol.

Adding the following in a <script> tag below your jQuery and Magnific Popup script should fix your issue, I just tested it myself, and the YouTube video - About Rakeeza - does load, as this video shows.

<script>
$('a.video.video-popup.mfp-iframe').magnificPopup({
    type: 'iframe',
    iframe: {
        patterns: {
            youtube: {
                index: 'youtube.com',
                id: 'v=',
                src: 'https://www.youtube.com/embed/%id%?autoplay=1'
            }
        }
    }
});    
</script>