0

On my page I put a Youtube video, but it doesn't work and doesn't show thumbs or autoplay.

My code:

var myVideo = document.getElementById("custom_video_play");

function makeBig() {
  /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
  myVideo.width = 650;
}

function makeSmall() {
  /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
  myVideo.width = 350;
}

function makeNormal() {
  /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
  myVideo.width = 450;
}

function playPause() {
  /* começa o video */
  if (video.paused)
    video.play();
  else
    video.pause();
}
<br>

<div style="text-align:left">
  <button onclick="makeBig()">Adjust: Large Screen</button>
  <button onclick="makeSmall()">Adjust: Small Screen</button>
  <button onclick="makeNormal()">Adjust: Normal Screen</button>
  <p></p>

  <video id="custom_video_play" width="400" controls="controls" autoplay>
<source src="https://www.youtube.com/watch?v=pgHr6luyjjs" type="video/mp4">             
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Vagner Bellacosa
  • 11
  • 4
  • ```?autoplay=1``` use those in query in the embed link. You can get embed link from youtube. Click on share and you will get embed iframe – Rajesh Paudel Jul 07 '21 at 18:13

2 Answers2

2

The way you put the youtube video is not correct. Go to the link of your video (https://www.youtube.com/watch?v=pgHr6luyjjs), then click where the share button is, then select embed, and copy the code it shows, paste it into your HTML.

** Remember to put the id to the iframe again.

var myVideo = document.getElementById("custom_video_play");

function makeBig() {
  /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
  myVideo.width = 650;
}

function makeSmall() {
  /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
  myVideo.width = 350;
}

function makeNormal() {
  /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
  myVideo.width = 450;
}
<br>

<div style="text-align:left">
  <button onclick="makeBig()">Adjust: Large Screen</button>
  <button onclick="makeSmall()">Adjust: Small Screen</button>
  <button onclick="makeNormal()">Adjust: Normal Screen</button>
  <p></p>

<iframe id="custom_video_play" width="450" height="400" src="https://www.youtube.com/embed/pgHr6luyjjs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>          
</div>

** The youtube iframe can't be played here, but try it locally, and you will see how it works.

The function play/pause video needs some changes to make it work with a youtube embed. Here is the post where you can find more info about it: Stop embedded youtube iframe?

Finally, the autoplay function is inside the iframe attributes, allow="autoplay". The autoplay function works only when you have already interacted (click somewhere) with the webpage due to a security policy of modern web browsers.

hyden
  • 21
  • 3
0

What @hyden said is correct, but I do not think that using allow="autoplay" in iframe would help in playing video in iframe instead using ?autoplay=1 in YouTube embed would help. And I have added few more points.

Use <iframe id="custom_video_play" src="https://www.youtube.com/embed/pgHr6luyjjs?autoplay=1&mute=1"></iframe> instead of using:

 <video id="custom_video_play" width="400" controls="controls" autoplay>
        <source src="https://www.youtube.com/watch?v=pgHr6luyjjs" type="video/mp4"></video>



Use YouTube Embed Code instead of using the YouTube Video Url. And use it via iframe and not video. To get more controls , you can visit - https://developers.google.com/youtube/player_parameters


Note:

  • You will need to autoplay the video muted, especially for Google Chrome, due to Chrome Autoplay Policy.
  • When YouTube Embed Video is run locally it might show Video Unavailable, so try using some of the online compilers like CodePen or JSFiddle , for the pages with YouTube Embed, before hosting it.
m24197
  • 1,038
  • 1
  • 4
  • 12