EMBED VIDEO

HTML tutorial

Embed Video.

An embedded video is a way of displaying, placing video contents in a blog using instructional coding-called HTML script codes. The html video codes are used to configure video contents as preferred as long as the coding rules are FOLLOWED NOT MESSING UP. As we have  many video channels now a days , however all has it own way of reconfiguration video which is also code video embedding. Firstly, let learn some of Video HTML codes meaning.


Iframe tags Descriptions

Normal YouTube
 

<iframe  The beginning of Iframe video html code commonly use by those who embed YouTube videos.

 width=   The code is incomplete..to complete it, add value after =sign and it should be in quoted "" form. For instance: width= "300" Further more Value "0" means: Nill. 

height="INPUT VALUE"  The height of the embedded video. Write the height value between quotation marks"". Example: height="300" 

Recommended embeded video Value for bloggers; width="560" and height="315"

type= ''input video type ''  Here need to input video Type either Mp4, 3gp, AVI

src="INPUT VIDEOS SOURCE/EMBED/VIDEO ID"

It's the source of the video you want to embed. The source address should be intermediated (separated) with slashes  / character.

frameborder="input value"  

; use semicolon mark; to add up instructions before last quotation mark".


Enabling the code will actually unveils all YouTube frame, boarder, and all sort of Youtube remainings.  To activate put on value in between "" quotations. However to diactivate Type on "O" in between quotation marks.

allow="Choose what to allow"

HERE you can allow other functionalities like that of autoplay; encrypted-media, full screen and more.

</iframe> For every Write up, articles, codes must have a full stop </iframe> act as stop point for iframe codes. Without it, codes will join, react with other codes; causing html malfunctions.

As i've show all needed KEYS of an embedded YouTube video. As we further,  more of alien Codes will be put practices stay alert while i proceed.

How to Input YouTube video IDs

 Starting with YOUTUBE videos, all videos on YouTube has  certain identification codes also known as YouTube ID CODES. THE ID code should normally be at end of every YouTube video URL address as shown hence forth:

To get your youtube video Codes Quickly enter your youtube Channel, either YouTube app or on Web Browser. For Web Browser write: www.youtube.com, sign up/sign in, browse through YouTube dashboard select "Channel" Your channel video will show. Select on any video you want to embed, select Share button to generate YouTube video codes as I've shown my below:

https://www.youtube.com/embed/CoixsKncuWY"


Part i marked red  CoixsKncuWY was one of mine my video YouTube ID.  I recommend you micro soft word or wps to copy and paste the Video ID for further use.

 https://www.youtube.com/embed/ADD YOUR VIDEO ID"

The video ID should be after /embed/ Where i quoted ADD VIDEO ID  should be replace with the video ID you want to embed.

Now, here are the FULL YouTube video coding without any modification credited toYouTube Google instructor:


<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 Or you can choose to use other methods like WYSIWYG editor. After YouTube video has being shared/copied, Paste the code into your WYSIWYG editor, and then append with the parameter(s) you want prefer. 

Note: that characters withiin quoted "" mark are like given instructions, rail line for your embedded video..

You should start an instructions with double quotation " add up instructions with semi colon ; end instructions with double quotation " ie you can add up more elements between the two quotations, separated with semicolon ; from start up quotation mark " and the end quotation mark"

 

How to mute video

 add &mute=1 to autoplay=1  to mute player


Youtube Branding LOGO, control, boarder, fullscreen and related videos REMOVAL

Have you ever want to remove the YouTube branding, logo, frame and related videos? You can control this by tweaking video HTML. 

How to logo

I do achknoledge the fact that the first strike a Channel owner will do is to remove YouTube logo . Thus to remove logo  from YouTube add:  ?modestbranding=1"  right after ADD VIDEO ID

?modestbranding=1" simple refer to YouTube logo 

Before

<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


After


<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID?modestbranding=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  How to YouTube player CONTROL Buttons/Bars

Control button/bars are those video adjustable buttons meaning: (Backwards, play,Next, forward,previous, Pause and stop) shown when 

 remove this elements: controls=0

to the code as shown below: 

Before

<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID"frameborder="0" allow="autoplay; encrypted-media" controls="0" allowfullscreen></iframe>

After

<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 Note: if you use modestbranding=0 couple with control=0 You will still see the YouTube logo


Youtube frame/ Boarders

 As mentioned above Enabling the code will actually unveils all YouTube frame, boarder, and all sort of Youtube remainings.  frameborder=""    To activate put on value in between "" quotations frameborder="input value".

However to diactivate Type on "O" in between quotation marks, but For the best result remove frameborder="input value"  elements from the HTML coding as i have shown below:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID" allow="autoplay; encrypted-media" controls="0" allowfullscreen></iframe>

 ALLOW FULL SCREEN

The YouTube full screen activation button  allow full screen  playing video in Full screen.

Depending on the choice you can choose to remove or not to. For removal, remove allowfullscreen> from the rest of the code just as shown below:

Before 

 <iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID" allow="autoplay; encrypted-media" controls="0" allowfullscreen></iframe>

After

<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID" allow="autoplay; encrypted-media" controls="0"</iframe>

  How to remove/Add Related videos.


Remove rel=0 elements from tbe rest of the codes. The elemente rel=0  means: Related videos shown at the end of a playing video . Not to remove the suggested videos in the sidebars. Below i shown where to remove:

Before  

<iframe width="560" height="315" src="https://www.youtube.com/embed/Video ID?rel=0"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 After

<iframe width="560" height="315" src="https://www.youtube.com/embed/Video ID? frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 

To add related video back rel=0 should be inserted on the code after Video id ?

If you want more than 2 parameter, after the previous parameters just add “&amp;” and then the next parameter. As shown below: 

 <iframe width="560" height="315" src="https://www.youtube.com/embed/Video ID?rel=0&amp;"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>



 LOOP ADJUST

loop means automatically replay the ongoing video after finished.

loop=1" means replay once 

loop=2" Means replay twice

Continuously you can add up as many loops as possible. Below is how the code looks:

 <iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID? loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>



 

 AUTO PLAY VIDEO 


Note: Be mindful autoplay do annoy viewers. So know where and when to activate Autoplay.


The elements autoplay alone means (default): The video will not play automatically when the player loads.

"&autoplay=1" Means  the video will play automatically when the player loads but only once .

To make autoplay 2, 3 4 times add any numbers value you like after = equal sign like this: autoplay=3" for value 3

Now to add up autoplay on your YouTube video, write: "&autoplay=1" immediately after video ID code as illustrated below: 

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID?modestbranding=0 frameborder="0" allow="autoplay=1; encrypted-media" allowfullscreen></iframe>

If you wish To remove autoplay 

Remvove this elements : autoplay=1; from other Html codes as shown below: 


<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID?modestbranding=0" frameborder="0" allowfullscreen></iframe>

 

To ENHANCE PRIVACY ON EMBEDDED YOUTUBE 


 According to google conditions under Privacy Enhanced Mode: 

"Privacy Enhanceed Mode allows you to embed YouTube videos without using cookies that track viewing behavior. This means no activity is collected to personalize the viewing experience. Instead, video recommendations are contextual and related to the current video. Videos playing in Privacy Enhanced Mode won’t influence the viewer's browsing experience on YouTube.


Please note that this mode is only available for embedded players on websites. Developers will need to use a WebView instance to use Privacy Enhanced Mode in applications.


As a reminder, the YouTube API Terms of Service and Developer Policies apply to the access and use of the YouTube embedded player. 


Note:


If the viewer clicks or taps out of the embed and is redirected to another website or app, that website or app may track the viewer’s behavior as per that website’s or app’s policies and terms.

Privacy Enhanced Mode is currently available only for embedded players on websites. Developers will have to wrap the Privacy Enhanced Mode player into a web-view instance in order to use it in apps.

To activate Privacy Enhance mode Change Youtube URL  https://www.youtube.com/embed/CoixsKncuWY" and add  -nocookie  before .com

As follows. Examine the codes below gently:

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


After

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ADD VIDEO ID"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>


Since this is a different domain, network administrators also need to add the domain youtube-nocookie.com to their firewall whitelist in addition to youtube.com."

 


To START A YOUTUBE VIDEO ON A CERTAIN TIME

Set YouTube your player timer to start on a specific time, Add this: "?start=”Write your time value in numbers after = sign before " . If you want your video to start 30 seconds after player load Follow the code shown:

 <iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID?start=30" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

 Note: The time is calculated in second. ie 90 means: 1 minite 30 second

 HOW TO STOP PEOPLE FROM EMBED YOUR YOUTUBE VIDEOS 

 If you have uploaded a new video and you don't want anyone to embed your video use these steps:

Sign in to YouTube Studio.

From the left menu, select Videos.

Next to the video you’d like to manage, select Details .

From the top, select More options.

Under “Additional options", uncheck the box next to “Allow embedding” Tap "Save".

 How to add logo to YouTube videos for branding

Lets say if you have a plenty of videos already uploaded without logo. Here i will teach you how to add your customized logo to your YouTube channel.

If you like to Learn how to make a beautiful Logo/banner yourself for your online business, blog, channels. Below are how to add logo from Local storage.


1. Log in to your YouTube account.

2. In your Dashboard click channel settings

3. Now go to InVideo programming

4. Click on feature your channel

5. Upload your logo in PNG or GIF format and click save and update.


how to add logo to YouTube video

After successfully removal of all above YouTube brands and remains the Code will look like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ADD VIDEO ID"</iframe>

No logo,frame, controls/ buttons, no autoplay.


Other video Html Codes It is much similar to I frame codes. The elements, coding, Only that the iframe is cutt of, the video source codes are much direct to video cloud storage not be YOUTUBE. There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is: Edge, chrome, Firefox,safari and Opera.

Full Video Codes


<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

Low version browser does not support the video tag.

</video>

 HTML tag

 Tag Description

<video> Defines a video or movie

<source> Defines multiple media resources for media elements, such as <video> and <audio>

<track> Defines text tracks in media players

Video with control buttons

 <!DOCTYPE html> 

<html> 

<body> 


<div style="text-align:center"> 

  <button onclick="playPause()">Play/Pause</button> 

  <button onclick="makeBig()">Big</button>

  <button onclick="makeSmall()">Small</button>

  <button onclick="makeNormal()">Normal</button>

  <br><br>

  <video id="video1" width="420">

    <source src="mov_bbb.mp4" type="video/mp4">

    <source src="mov_bbb.ogg" type="video/ogg">

    Your browser does not support HTML video.

  </video>

</div> 


<script> 

 supported browsers

 Browser Support

The numbers in the table specify the first browser version that fully supports the <video> element.


Element

<video> 4.0 9.0 3.5 4.0 10.5


Comments

Popular posts from this blog

How to Fix Mobile Data low speed on Smartphones

VAINGLORY-- offline

Piousness