DynTube Help Center
  • Welcome to our Help Center
  • Videos
    • How To Upload & Embed Videos
    • Playing DynTube Videos in Native Mobile Apps
    • How to Embed Videos in WordPress
    • How to create a video feed for Roku & Fire Tv
    • How to live stream on DynTube using OBS
    • How to Change Video Thumbnail
    • How to Change the Video Player Skin
    • How to Download Oirignal Videos
    • How to Use Original MP4 Without Transcoding
    • Use your own domain for videos and channels
    • Automatically Import Videos from Google Drive using Zapier
    • Move videos to a different project
    • How to add call-to-action on a video
    • How to enable white-label video links
    • Tracking Video Viewers with Custom User IDs/Emails
  • Security
    • How to secure your videos on DynTube
    • How to Add Login Protection on My Videos
    • How To Turn On Video Encryption
    • How To Create Plans & Subscriptions
  • Channels
    • How to Create Video Channels
    • How To Sort Videos in a Channel
    • Custom Video Order in Your Channel
  • Projects
    • How to create a project
    • How to Edit Project Settings
    • How To Save Original Source Files
  • AI Features
    • How does the AI-powered transcription and translation pricing work?
  • TV Apps
    • How to Add Your DynTube Roku Feed to a Roku Channel
    • How to Add Your DynTube Fire TV Feed to an Amazon Fire TV Channel
  • Account
    • How to Upgrade My Plan?
    • How to Update My Credit Card Details?
    • How to Check My Payment History?
    • How To Download the Invoices?
    • How to add more users to my DynTube account?
    • How to Cancel My Plan?
  • FAQs
    • How to Choose Between Plans?
    • Video Options
    • Video Player
    • Bandwidth
    • Video Uploads
    • HLS Streaming & Storage
    • Screen Recording & Download prevention
    • Video Playback Issues
    • Billing
  • Tips & Tricks
    • Embed videos using the new video player
    • How to make rounded big play button
    • How to Embed DynTube Videos in LearnDash
    • How to Embed DynTube Video Channel in WordPress/LearnDash
    • How to add dynamic watermark to the video player
    • Control Video Player using URL
    • How to use your own videos as Ads
    • How to embed DynTube player in Next.Js
    • How to embed the DynTube player in React
    • How to embed videos & channels dynamically
Powered by GitBook
On this page
  • Step 1.
  • Step 2.
  1. Tips & Tricks

How to embed the DynTube player in React

PreviousHow to embed DynTube player in Next.JsNextHow to embed videos & channels dynamically

Last updated 1 year ago

You use our sample react app from GitHub and edit the data-dyntube-key attribute in /src/App.j.

Here are the two steps explaining how you can do it in your app.

Step 1.

Please open /public/index.html a page and paste the following script tag in the <head> section.

<script>!function(e,t,i){if(void 0===e._dyntube_v1_init){e._dyntube_v1_init=!0;var a=t.createElement("script");a.type="text/javascript",a.async=!0,a.src="https://embed.dyntube.com/v1.0/dyntube.js",t.getElementsByTagName("head")[0].appendChild(a)}}(window,document);</script>

Step 2.

Please open /src/App.js or any other component where you want to embed it and paste the <div> part of your embed code.

<div data-dyntube-key="7FavFDdssdpztWUTwVQ"></div>
GitHub - dyntube/react-embed-sampleGitHub
Logo