The JavaScript code to create a Lightning Component on a Visualforce page is as follows:

<apex:page>
    <apex:includeLightning />

    <div id="Lightning" />

    <script>
        $Lightning.use("c:youtubesearchOutApp", function() {
          $Lightning.createComponent("c:youtubesearch",
          { },
          "Lightning",
          function(cmp) {
            // do some stuff
          });
        });
    </script>
</apex:page>

Notice that $Lightning.use() accepts two parameters: 

• The name of the Lightning Out dependency application, along with its namespace.

• A callback function. The callback function receives no arguments. This callback is usually where you call $Lightning.createComponent() to add your app to the page (see the next section, Lightning Out in a Node.js application).

Also, note that $Lightning.createComponent takes four parameters, described as follows:

• The name of the Lightning Component that you want to render, along with its namespace.
• Attributes that you want to pass as an object. Attributes declared in components can be passed from JavaScript as an object.
• The DOM element ID where the component needs to render. In our case, we have a div with the ID Lightning.
• A callback function called once the component is rendered.

Once you preview the page in the classic UI using /apex/youtubesearch, you can see that the component is rendered and works as is. The following screenshot shows the working application in classic Visualforce: