Two ways of inserting videos into your HTML5 and css3 bootstrap responsive website.
This is the thing that we are going to learn in this tutorial so stay tuned.
[Music..]
Hello and welcome to another new episode of learning simplified.
Today we are about to know how to insert videos into your project, and of course this is a
bootstrap responsive one that means we have..
We are allowed to use HTML5 and css3.
There are two ways of inserting videos into your project.
The first one is the conventional where we will be using the iframe class and
the video will be uploaded into YouTube first, from there we will be using the source code,
the embedded code actually; and in the second case, this is practically
an experimental one, we will be trying to insert video that means the video tag which
is used in HTML5.
Now these are the two things that we are going to learn - so let's concentrate into the first
case.
Now if we get back into our project we can see that actually a
separate container has been produced in this purpose and I have used two columns over here,
both of them are consuming six [6] grids each.
And in the first case we have used the common embed response code that
are extensively used in case of bootstrap technique.
Here we have used a div class embed-responsive and
embed-responsive-16by9.
So this is practically a 16:9 aspect ratio, if we want to use a 4:3 aspect ratio, it would
have been 4 by 3.
If we wanted to use a 1: 1 aspect ratio then it would have been 1 by
1.
So these are the things that we need to remember always.
I am using here 16:9 aspect ratio and then we are defining this iframe class.
Here it is, this is the class, embed-responsive-item, I have allowed allowfullscreen
here and the source is this one.
This is practically a little witty thing that we need to improvise here.
This is our channel and here this is the video that we want to use in our project and that
is why I will be opening it into a new tab, I am just pausing it and here in this segment
this is the share button as we can see over here.
Now all we have to do we have to use this embed code and here this
is the source file that we are practically looking for.
All we have to do we have to copy this one.
This is the whole thing that we need to copy and this is going to
be used over here in this segment.
Always remember to use the source code while you are using a YouTube video.
But the first thing is you have to upload the video
into YouTube and then you have to use that embedding code and you have to set those parameters
over here as you can see class embed-responsive-item and you have set
this allowfullscreen mode, and you have declared the source.
So this is the first case that you are aware of.
And in the second case you are using the core HTML5 video tag.
This is the video tag that you have used in case of
an HTML5 page, with this tag practically no external player is required, the browser itself
will play all those videos that will be defined over here and with the
proper parameters it will be executed.
Now we have used this video with controls.
Now if we remove this 'controls', just remove this 'controls', press control + s,
get back to your project and you can see that here is a controlling segment is present.
Now reloading here and we can see that there's no control panel is being
executed here, no control is present over here.
Reload and now you can see that those controls are present there.
On the other hand if we now move this autoplay option, remove this autoplay option and get
back to your project and reload, now we can see that the auto playing
option, the autoplay mode is been disabled.
If you want to see this video all you need to do is you need to click this button and
you can see that the video is now playing inside your browser and everything
is quite alright.
So if you activate this autoplay option again and get back to your project and reload you
can see that the video is now playing, it is getting played
automatically and we don't have to click any button here.
So this is the thing that you have to remember.
In the next case I have said this width to 100%.
That means it will be consuming up all of these grids while being played inside your
browser.
In this case you may have observed that we have used a source src
where I have used the folder, the containing folder that is practically holding all these
videos inside, and the name of the file and the type of the video which is
.MP4.
Now you may see here another thing that I have used the same folder name, same file
name but this time with a different extension name and we have mentioned
a type.
In the first case here I have mentioned that the type is video/MP4, and in the second case
I have mentioned this type as video/webm.
In this days MP4 is good enough to be played across any Browser and it is
now well adopted and well supported by the latest versions of every Browser.
But you need to keep in mind that in some certain cases there are some monitors, there
are some systems or computers those are still using old Browsers and everything in its older
version.
So that is why in older versions this kind of video players
that is this .MP4 those were played by some certain kind of browsers such as mozilla it
supported .MP4, but in case of Safari or in case of some other browsers it
is seen that wabm is the ultimate source player that means this will be the supported file
for those kind of browsers.
So that is why same video it has been converted twice, it has been set to .MP4 version in
the first place and then it had to be placed again it had to be called in
again as a .webm format in the second case in an effort to be supported across all browsers
in their old version format.
So that is why this is a repeatation of the same video twice.
There goes practically the folder that holds all those videos, here, these are the videos
as we can see.
In the first case we have used the embed-responsive method, the common conventional prototype
responsive method and we can see that this is the common
conventional method that is being used all over and in the second case, this is experimental
what you can adopt it if you do not wish to upload your videos into
YouTube then all you need to do you need to call in those video tags inside as you know
that bootstrap is an HTML5 and css3 format supported.
Look into this doctype! declaration.
Here it is, hTML language English and you know that all those things those are being
called like here HTML5 shim or shiv code [hack code]
over here and all those things.
That means it is an HTML5 version supported.
Then I think that there is possibly no problem in executing those videos in this type,
all you need to do you need to call in this video tags over here, you need to define those
controls here and then you need to define the autoplay option whether
you wish to keep some autoplay or not, and in case of responsive I think it will be a
wise thing to use this width to define it as a hundred percent, and then you
need to define the source of this video as we can see and the type of the video, then
you need to define these videos in two different file formats.
Now let's look into the browser and check out our videos that finally those are working
or not.
This is practically of video of ours which will practically be
played back from YouTube, now let's see....
It is now doing quite well over here.
And now let's play it again...
Here is the controls, as you can see, you can maximize, you can restore, and this is
the pause button as you can see.
So we have successfully implemented these two videos inside our bootstrap project and
now let's Press control + shift + m and and see what is
happening inside.
Here it is we can see that all these two things, practically both of them are working well
and there won't be any kind of problem playing this
video is now into your website or into your project.
That's all for today's tutorial.
I hope you have like this tutorial if you have liked it do not hesitate to hit that
Red SUBSCRIBE button.
Hope to see you guys in next tutorial.
Till then, bye...
For more infomation >> El testimonio brutal que desmonta la realidad de la familia de Rocío Carrasco | Noticias de hoy - Duration: 2:27. 
For more infomation >> Chloé Mortaud a fait une fausse couche il y a six mois - Duration: 2:17. 
For more infomation >> The Keys of Death & Hell
For more infomation >> 11 வயதில் திருட்டு தனமாக ஒரு பெண்ணுக்கு தாலி கட்டிய நடிகர் விஜய் | Tamil Cinema News | TAMIL STICK - Duration: 1:25. 
For more infomation >> HIMARS: Współdziałanie i możliwości modernizacji [Defence24.pl TV] - Duration: 3:10. 
For more infomation >> The 100 stagione 5: quale minaccia dovranno fronteggiare i protagonisti? - Duration: 4:00. 
For more infomation >> Frankia I 790 GD - Duration: 0:54. 
For more infomation >> Honda HR-V 1.5 I-VTEC ELEGANCE AUTOMAAT - NAVIGATIE - Rijklaar!!! - Duration: 0:59. 
For more infomation >> BMW 5 Serie 523 i Touring High Exe Navi,Clima,Pdc - Duration: 0:55. 
For more infomation >> Honda Accord Honda Accord 2.2 i-DTEC Executive Trekhaak panorama dak - Duration: 0:57. 
For more infomation >> Toyota Verso-S 1.3 VVT-I DYNAMIC PANORAMIC NAVI TREKHAAK - Duration: 0:59. 
For more infomation >> Hyundai ix35 1.6I GDI STYLE - Duration: 0:59. 
For more infomation >> Honda CR-V 2.0i Elegance Automaat - Duration: 0:56. 
For more infomation >> Hyundai i20 1.2I PLUS 5-deurs | Climate | Bluetooth | 1e eigenaar! - Duration: 0:47. 
For more infomation >> Citroën C3 Pluriel 1.6I-16V Cabrio Automaat | Airco | Elek.ramen - Duration: 0:53. 
For more infomation >> Hyundai i10 1.1 I-CATCHER 5-DR | AIRCO | ELEKTRISCH PAKKET | LM VELGEN - Duration: 1:00. 
For more infomation >> Følge Op- team for hjertepatienter - Duration: 2:02. 
For more infomation >> Channel Update| Minecraft Animations | - Duration: 0:10. 
For more infomation >> Conselhos Essenciais para Multiplicar Seus Clientes - parte 1 - Duration: 10:46. 
For more infomation >> Motor Caterpillar® | Testemunho Cliente Gesink - Duration: 2:50. 
For more infomation >> Аниме приколы | Anime COUB | Аниме приколы под музыку #4 - Duration: 5:55. 
For more infomation >> Май литл пони. Семейная жизнь .1 серия. - Duration: 8:02. 
No comments:
Post a Comment