HTML YouTube

2 min read

HTML дээр видео тоглуулах хамгийн хялбар арга бол YouTube ашиглах явдал юм.


Видео форматууд асуудалтай байна уу? #

Видеонуудыг өөр формат руу хөрвүүлэх нь хэцүү бөгөөд цаг их шаарддаг.

Хялбараар шийдэхийн тулд YouTube-ийг вэб хуудсан дээрээ видео тоглуулах боломжийг олгох явдал юм.


YouTube-ийн видео дугаар #

YouTube видеог хадгалах (эсвэл тоглуулах) үед id (tgbNymZ7vqY гэх мэт) -ийг харуулдаг.

Та энэ id-г  HTML кодондоо хавсаргаж видио тоглуулах боломжтой.


HTML дээр YouTube-ийн видеог тоглуулах #

Вэб хуудсан дээр видеогоо тоглуулахын тулд дараахь зүйлийг хийгээрэй.

  • Видео бичлэгийг YouTube дээр байршуулах
  • Видеоны id-г тэмдэглэж авах
  •  <iframe> элементийг веб хуудсанд дээрээ хийх
  •  src шинж чанарыг Youtube URL-рүү заах
  • width болонheight шинж чанараар хэмжээсийг тааруулах
  • URL-д бусад параметрүүдийг нэмэх (доороос үзнэ үү)

Жишээ #

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>

YouTube-автомат тоглуулах #

YouTube-ийн URL дээр autoplay=1 нэмж оруулснаар хэрэглэгч хуудсанд зочлох үед видео автоматаар  эхлэнэ. Гэсэн хэдий ч видеог автоматаар эхлүүлэх нь таны зочдод ядаргаатай юм!

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1"> </iframe>

YouTube-ийн тоглуулах жагсаалт #

Тоглуулах видеонууд таслалаар тусгаарлагдсан жагсаалт (анхны URL дээрээс гадна).


YouTube-ийн давталт #

loop=1 гэж нэмсэнээр видио давтагдаж тоголсоор байх болно.

Утга=0 (үндсэн утга): Видео зөвхөн нэг удаа тоглогдох болно.

Утга=1: Видео давталт хийх болно (үүрд).

Жишээ #

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1"> </iframe>

YouTube-ийн удирлага #

controls=0 нэмсэнээр видео тоглуулагч дахь удиралагыг харуулахгүй байх.

Утга 0: Тоглуулагчийн удирлага харагдахгүй байна.

Утга 1 (үндсэн): Тоглуулагчын удирлага харагдана.

Жишээ #

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"> </iframe>

Powered by BetterDocs

Leave a Reply