Youtube embedded video not clickable. How do I fix it? - html

For school we need to make a website with a screencast. I have uploaded the video to YouTube and put it embedded in the website. The video shows up but it isn't clickable. When I try autoplay it plays on my friends computer (windows, chrome) but he can't click. On my computer (Mac, Safari) it doesn't even play, it is still on the first frame. Does anyone know how to fix this???
Here's the code:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/qo6rGlgzKWI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
There is no css yet.
It is inside a div with just normal text.

Just tried this one works fine on mac safari
<iframe id="myythtml5player" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" width="560" height="315"
src="https://www.youtube-nocookie.com/embed/qo6rGlgzKWI" data-tooltip-align="b,c" data-tooltip="YouTube video player" aria-label="YouTube video player" data-title="YouTube video player"></iframe>
Example : https://jsfiddle.net/jxfoywb2/
see this answer : youtube embed video not working with safari

Related

YouTube ?showinfo=0 not working but working on scratch.mit.edu

I paste this code to Scratch site using devtools:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dwEpRL1RiD4?showinfo=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
I tried, too:
<iframe class="youtube-player" type="text/html" width="538" height="324" src="//www.youtube.com/embed/SvOx7tA_Cv8?fs=1&rel=0&autoplay=1&showinfo=0" frameborder="0"></iframe>
The video title and uploader is shown on all sites except Scratch site.
I inspected codes of Scratch site, but I was unable to fix issue. How can I fix it?
It is deprecated in 2018. Now not for use in websites except scratch.mit.edu.
You cannot do it, it is only available for that site.

Youtube embed not working in html using chrome

I am trying to embed a Youtube video in html. But whenever I launch it in live server using visual studio code. it says it is unavailable.
Here is the code:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/lSAheIeimCY" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
I have tried using videos from different people as well as launching it in chrome instead of live server.

Html video attachment

I am having trouble attaching a video in my html file. I used a youtube video for this one but whenever I open it on my browser it says the video is unavailable because youtube refused to connect. I also tried attaching a video from my computer that ended with .mov and that didnt work either. here is what i wrote in html for the youtube one.
<iframe width="560" height="315" src="https://youtu.be/u9fftcQGSa0"
frameborder="0" allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen></iframe>
For using YouTube videos in your website, go to the video > Share > embed. Take the HTML code snippet and paste it in your desired place.
For local server video attachment in your website:
<video width="1080px" height="720px" controls="controls"/>
<source src="write your video location/link here with extension" type="video/mp4">
</video>
Example:
<video width="1080px" height="720px" controls="controls"/>
<source src="video.mp4" type="video/mp4">
</video>
For YouTube video attachment in your website:
Step 1:
Go to YouTube and select/open your video,
Go to share option,
Click Embed,
Copy Embed link
Step 2: Go to your html code and paste your YouTube embed code
Example:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/uzumIYBSaWY"
title="YouTube video player"
frameborder="0"
allow="accelerometer;
autoplay;
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture"
allowfullscreen
>
</iframe>

why doesnt my html video work neither if it is a youtube link(like in this case) nor if i use mp4?

i am trying to include a video into my html project, but when i run the code, the video doesnt work. what is the problem?
<video src="https://www.youtube.com/watch?v=rt-2cxAiPJk" controls width="400px"></video>
<video src="https://www.youtube.com/watch?v=5VYb3B1ETlk&t=1s" controls width="400px"></video>
<video src="https://www.youtube.com/watch?v=x_me3xsvDgk&t=1s" controls width="400px"></video>
I think the src is expecting to find a file on your machine, or possibly you can't play a video from a different domain. I'm not sure what the exact requirements are for src but it's probably a domain issue.
YouTube does provide embed code for videos and they use an iframe to make them work. I tested on my machine and with the iframe it works. For your first video it's
<iframe width="857" height="482"
src="https://www.youtube.com/embed/rt-2cxAiPJk"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
You can probably just copy that for every video and change the src.
You can right-click a video on YouTube to get the embed code.

Autoplay embedded a YouTube Video

I'm trying to embed a Youtube video to my site that plays automatically once the page is loaded.
I'm currently using:
<iframe width="560" height="315" src="https://www.youtube.com/embed/V4kXFYRhwL0"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
However the video doesn't play until clicked. What is wrong with this code?
Link to site: http://oxfordcliqr.com/
Add this into the URL string:
?autoplay=1&mute=1
This will set the property autoplay to 1 and mute to 1, so the video starts playing once the page is loaded.
Due to the policy changes, autoplay videos only works if the video is muted.
Example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/V4kXFYRhwL0?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
pass autoplay=1 to auto play in youtube URL and mute=1 to mute it, both works when page get load completely
eg: <iframe width="560" height="315" src="https://www.youtube.com/embed/V4kXFYRhwL0?autoplay=1" ></iframe>
Use below iframe URL to the autoplay youtube video
<iframe width="420" height="315" src="https://www.youtube.com/embed/Zm4zpyn0ixw?autoplay=1&mute=1"></iframe>