Create a youtube web monetization embed in your blog post
Tags: gftwhackathon, blogspiritbro1english, react, javascript
Published: 2020-06-14 04:43:58

## What I built

Sometimes we find it hard for a new youtube content creator to sign up for the adsense we should have more than 1000 subscriber and so on. I want to create some website that can embed and play your video while you can still get some friction of money from web monetization api and also wait for your subscriber to grow up and apply for your adsense later.

### Submission Category: 

Creative Catalyst


## Demo

 https://youtube-web-monetization.vercel.app/

## Link to Code

{% github https://github.com/catflip/webmonetizationreact %}
[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)


## How I built it 
 First of all, i create a blog template from the article you can find the link to the article in additional resources.
after that i edit the component to my use case first component is for the article that lead to the actual web monetized youtube embed

this is the main router component in App.js:

```javascript
import React from "react";
import styled from "styled-components";
import { Google } from "./item/Google";
import { Youtube } from "./item/Youtube";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
const Wrap = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 1em;
`;

const Primary = styled.div`
  max-width: 650px;
  margin: 0 auto;
  font-family: "Sen", sans-serif;
`;
function Main(props) {
  return (
    <Wrap onClick={() => props.history.push("/youtube")}>
      <Primary>
        <Google />
      </Primary>
    </Wrap>
  );
}
export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/youtube">
          <Wrap>
            <Primary>
              <Youtube />
            </Primary>
          </Wrap>
        </Route>
        <Route path="/" component={Main}></Route>
      </Switch>
    </Router>
  );
}

```

this is the google component when clicked it lead to the youtube embed article:

```javascript
import styled from "styled-components";
import React from "react";
const Block = styled.div`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  border: 2px solid darkgray;
  margin: 0 1em;
  padding: 0.25em 1em;
  margin-bottom: 3vh;
  margin-top: 1vh;
  transition: 0.5s all ease-out;
  &:hover {
    background-color: darkgray;
    color: white;
  }
`;
export const Google = () => (
  <Block>
    <h1>Google</h1>
    <p>
      Click this and you will go to youtube monetization embed component
      Page.
    </p>

  </Block>
);


```

after here comes the real deal the youtube web monetization embed article

```javascript
import styled from "styled-components";
import React, { useState } from "react";
const Block = styled.div`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  border: 2px solid darkgray;
  margin: 0 1em;
  padding: 0.25em 1em;
  margin-bottom: 3vh;
  margin-top: 1vh;
  transition: 0.5s all ease-out;
  &:hover {
    background-color: darkgray;
    color: white;
  }
`;
export const Youtube = () => {
  const [monetized, setMonetized] = useState(false);
  if (document.monetization) {
    document.monetization.addEventListener("monetizationstart", () => {
      setMonetized(true);
    });
    document.monetization.addEventListener("monetizationstop", () => {
      setMonetized(false);
    });
    
  return monetized ? (
    <Block>
      <h1>Youtube Video</h1>
      <iframe
        title="s"
        width="560"
        height="315"
        src="https://www.youtube.com/embed/sBNtvg5D2CM"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </Block>
  ) : (
    "please enable web monetization to see youtube video"
  );
};

```

using this we can use state hooks to differ beetwen monetized or not monetized state of the web monetization api

after that dont forget to add meta tag in index.html

```html
<meta name="monetization"
      content="$ilp.uphold.com/fWeqW8gyKzGw">
```
voila now you can get your article web monetized like below:

![Imgur](https://imgur.com/download/c3FEZZ8)

[Note]: # (For example, what's the stack? did you run into issues or discover something new along the way? etc!)


## Additional Resources/Info 

{% link https://dev.to/julianeon/building-a-simple-blog-in-1-file-using-react-404e %}

[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)