YouTube Embedding In HTML

-

YouTube Embedding In HTML

YouTube Embedding Tutorial Using JavaScript Block Editor Android Application

YouTube is one of the most useful tool in the world of technology. If you publish a website, it will be incomplete if you don't link it with your own YouTube channel. Imagine, if anyone leaves your website for watching your video(s) and does not come back to your website, or forgets your context — then what's the opportunity of linking "a href" for YouTube? The solution is — YouTube Embedding. You can embed your video(s) and/or playlist(s) in your website! Users/readers do not have to leave your website. It is a tool provided by Google; and you, now, can use this tool in JavaScript Block Editor app, too.

We also used "YouTube Embedding" in this website!

Let's learn how to embed!!

Prerequisites

  • YouTube Channel
    •
  • YouTube Public Video(s) or Playlist(s)
    •
  • Allow Embedding from YT Studio
    •
  • Copied Link of Video/Playlist
    •
  • JavaScript Block Editor App
    •

    Steps

    Turn data connection on and open an existing project. In main HTML or any Child Room, you can use YouTubeView element. Click on that to add this element to a specific line of editor. Okay, now it's added.

    YouTubeView Id: This field is not required. But if you want to use View from JS Block specs, you should provide an Id.
    YouTube Config: Click on this. An ad will appear, watch the whole ad and then close ad; otherwise you'll not be redirected into the YouTube API!

    Then you can configure YouTube API.

    width: If you do not want to use regular size, enter width (integer).
    height: If you do not want to use regular size, enter height (integer).
    Regular size (16:9): If you want to use regular size for your embedded video(s), check this.
    Regular size (16:9)
    If you do not want to use regular size, provide width and height plus withdraw check from this.
    Regular size (16:9)
    video id (11 characters of url): Every video or playlist has a unique id of 11 characters. First, copy link, then paste here and only keep 11 characters id here. For more information, click ? mark in app.
    Playlist: If your link was a playlist, check this.
    Playlist
    If your link was a video, don't check this.
    Playlist
    Autoplay + Muted: This property let's you mute the video. And after finishing this video, random video will be started. Check this if you want to include these features.
    Autoplay + Muted
    Otherwise don't check this.
    Autoplay + Muted
    Loop: If you want forever looping for you video, check this. After finishing your video, it will be started again, and this loop will continue forever.
    Loop
    Otherwise don't check this. It will be shown once.
    Loop
    Controller: If you want to provide users a media controller, turn this checked.
    Controller
    Otherwise don't check
    Controller

    We've included information like above for instance. Now click ➤.
    Run the project.

    Happy implementation!

    Comments

    Post a Comment

    Popular posts from this blog

    SeekBar JavaScript (I)

    -
    Image
    ✪ Luminous Organisation JavaScript SeekBar (I) Contents Chapter I What is SeekBar Calling a default SeekBar Setting minimum, maximum and value Getting progress Chapter II Setting progress programmatically Important lifecycle event: On Touch End Importance of SeekBar Wait a minute 1. What is SeekBar ❝A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level❞ — Android Developers. You all know about ProgressBar which displays the current progress of any event. Usually ProgressBar displays progress at a percentage value, such as — downloading (87%) . Like ProgressBar, SeekBar has its current value, minimum and maximum range. We can say ProgressBar an output element, whereas SeekBar is an input element, where user can alter the value within a preset range. Here is an example of SeekBar. Its range is between 80 to 100 and value is 85 by default. Get Progress S...
    Read more

    Image Editing / Element Filtering | JavaScript Block Editor

    -
    Image
    Image Editing / Element Filtering | JavaScript Block Editor You can add either an ImageView or any other elements such as Button, TextView etc. We have added a Button to edit. 🏞️ 🏞️ The first one is real and the second one is edited by the filtering property of JavaScript. Let's know about it. Prerequisites Download   JavaScript Block Editor  App  HTML Add either an ImageView or any other element such as Button, TextView etc . Hence we can say that this property is not only for an ImageView. Make sure you provide a unique id for that element. Optionally add CSS to that element. For instance you can enlarge the size of that element for a better vision. JS Click ImageView > Edit Image . Provide element id properly. Edit the element in your own way by enhancing filtering effects: Blur, Brightness, Contrast, Grayscale, Hue-rotate, Invert, Opacity, Saturate, Sepia. Understanding subspecs (!important) Filter effects Effect Default Value Values...
    Read more