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
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β¦
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:
Oldest comments (0)