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

gakpenting / webmonetizationreact

Create a youtube web monetization embed in your blog post

with this project you can create your own youtube embed monetized using web monetized api this is useful for people who still doesnt have their adsense activated

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for…

View on GitHub

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:

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:

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

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

<meta name="monetization"
      content="$ilp.uphold.com/fWeqW8gyKzGw">

voila now you can get your article web monetized like below:

Additional Resources/Info

Building a Simple Blog in 1 File Using React

Julian Martinez ・ Mar 15 '20 ・ 6 min read

#javascript #react #webdev #css