Waching daily Jan 3 2018

Trump threatens aid to Palestinians, appears to contradict himself on Jerusalem new video

For more infomation >> Trump threatens aid to Palestinians, appears to contradict himself on Jerusalem new video - Duration: 4:01.

-------------------------------------------

Learn to make a Fullscreen video background in html5 and css-without JavaScript - Duration: 10:32.

Hello and welcome to another new episode of learning simplified.

In this tutorial we are going to learn how to insert a full page video

background into your web project.

And will be learning it both in easy way and in the

Hard Way.

Now as we can see here that this is the video that is been inserted as the page

background and it is getting a responsive full page preview.

If we just press Control + shift + m, and we can see that it is now

getting loaded into your 320 by 480px browser and this is the output as it is seen over

here.

In the first case we will be learning about it in the easiest way.

And then we will be reaching for the harder way.

Don't worry about these kids; those are my nephews and

you may say that they are just nightmares, they are just menace; they might seem a little

bit shorter to you but both of them are nightmares - oh my god just save me from these

kids.

Okay.

So let's just start.

Let's learn about this video.

We have created a 'video' folder inside our root folder and inside this

'video' folder we have placed the video which is at a width of 1207 by 720px, and

it has a total size of 11.4MB, as we can see over here.

So this is the video that will be needed and we will be needing a separate

fullpagevideo.html page and we have a fullpagevideo.css file for this individual video

page.

So here it goes.

Here is the basic needs those we will be needing here.

And we have created this HTML5 page.

One thing must be cleared first of all that in case of a video

supporting web browser preview, you will be needing an HTML5 instead of a normal HTML

as you know that a HTML5 supports these video

tags and controls and other those sort of things; so we will be needing this HTML5 page

and that is not been created over here.

As you can see that this thing is a doctype HTML declaration, then comes the HTML

language declaration, within the head part we can see that this is the meta charset

definition which defines the charset properties into the page; we are currently using

this UTF-8; and then comes this meta-http equivalence which actually defines the

supporting in case of Internet Explorer browser, and the last of these things is the

meta name viewport.

We are living at the age of the mobile responsiveness.

That is why we will be needing our site to become mobile

responsive and that's why we will be needing this particular Syntax over here.

After that we will be needing a title.

So we are providing a title...

So here goes..

And here in this fullpagevideo.css file we have

created this @charset property that should be used in your .css format; and inside this

CSS document, the first thing that we are doing we are using and universal selector

to make the declaration of margin:0, padding

0 condition.

So that's it and in the next case we are using this general selector tag; there

it goes.

And inside this fullpagevideo.

html, we now have to link this stylesheet.CSS page with our main .HTML page, that means

this fullpagevideo.html and this is what we are going to do.

Relevance is 'stylesheet' and type is 'text/CSS'.

Now we have done it so far so let's get back to our project and reload and we can see

that this is the output.

So the link is established.

Now let's get back to 'fullpagevideo.HTML' and here first of all

we are providing video source.

And we are creating and ID for it....

We have to define the source file now; this is the main

containing folder inside which we are using this particular file with a .MP4 format.

Now let's get back to our project and reload and we can see that the video is been

inserted into our page.

But this video is not up to the mark; it is now leaving a

particular margin from the right as we can see, we have to make it a full page one.

Now we have created an ID into our video tag in this fullpagevideo.html.

Remember?

We have to copy this video sample from here and we have to get back into our

fullpagevideo.css and we have to define it.

So there it goes.

First of all the width should be 100%.

We are making this position fixed.

Now we have to reorder this position so all we're doing we are stating that from

the top it will be leaving no margin and from the left it won't be leaving any margin

either.

So this is what up to this part.

If we just press Control + s and get back to

our project; first of all see over here; this is the video that is been placed into your

HTML Browser; now if we reload we can see that due to this condition, this video is

now in full page responsive and it is back in

action; it is actually placed into position and if we press Control + shift + m We can

literally say that from top it is leaving no

margin and from left it is leaving no margin either.

So that is why we have used these kind of things over here; there it goes.

The width has been hundred percent and the position has been fixed; from top it is leaving

no margin and from left it is leaving no margin.

Now another thing, we use here min-width of 100% and now if we specify that

min-height is 100% too; what should be the difference?

We are reloading.

There's actually no difference in display in this normal condition,

in this desktop preview; but if we press Control + shift + m we can see that

this is the output.

In case of - if we use this particular min-width declaration and this

min-height declaration, all we can see that in

case of a responsive preview now the video is getting this full page but the problem

is somewhere else.

Can we see any face?

It is now getting unseen.

In practicality, it is now getting trimmed within your device width and

that is why we cannot see faces.

All we are seeing some moving pixels into our webpage,

into our Browser but in case of a mobile responsive preview where we would like to

have a full page display, I would like to recommend you this particular thing that is

to declare this width, ignore this min-height, no need to specify this min-height

here; just reload and we can see that this whole video is now being displayed in front

of your eyes.

Instead if you want to have a full page display as we have witnessed in

our previous case then only you can declare this min-width, or min-height condition over

here.

Now here will be talking about the easiest way.

So what is the easiest way?

The easiest way is we do not call any kind of JavaScript

here, we do not call..

We do not actually need to provide any programming over here.

In case of HTML video tag, if we specify this particular Syntax, such as 'controls'.

There's absolutely no need of specifying anything else.

If we now reload, get back to normal preview if you just click on it you can see

that the video has been paused.

If you click again you can see that the video is now been

played.

Secret behind it is in case you have mentioned this particular Syntax known as

'controls', it is now generating every kind of controls into your videos such as this

'play', 'pause', 'seeking' or 'volume control' or those sort of things.

What else you have mentioned the position to be fixed and

that is why this control panel is getting invisible to you; it is now getting barely

visible to you and all that is left to work in this particular case is only the 'pause'

or the 'play' interactive button.

This is a true problem in case of a web browsers perspective

view; then we can see that it is rather rendered a very impracticable thing

to implement into your website, to your webpage actually.

And that is why when we need something more interactive that is

getting visible to the user, that is getting more prominent to the user, and one will

understand that in this particular place I have to click to play this part, in that

particular case we need to carry on this task into some harder way and that is why we

need to call in a button into our page and we need to call in some JavaScript, need to

call some functions, need to define some functions, variables and those sort of things;

so this is what we are now going to see but first of all we need to make some kind of

amendments over here.

So let's get back to fullpagevideo.html and here we will be making

some more amendments; let's check it out...