doing a school project and the video is not playing on the webpage
An error occurred. Please try again later. (Playback ID: 9yPd2vpwAXOFFLlB) Learn More
here is my code
<iframe width="420" height="315" src="https://www.youtube.com/embed?v=oKilU3g0om0?" allowfullscreen>
</iframe>
Essentially it's the wrong link. Using the embed feature off of youtube, it looks like you want your iFrame to look like this
<iframe width="560" height="315" src="https://www.youtube.com/embed/oKilU3g0om0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
If you want to use your existing code, the only part you really need to change is the src link
Related
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.
I know this is a strange question, but When my friend ask me regarding this, I become quite confused since this is matter for our landing page performance and I'm not quite sure regarding this. So this is my question:
Let say, in my landing page, we usually have a total size around 300Kb after build (this is already include all of the asset, without any embedded video). But recently we want to revamp it and our opinion split into two:
Where in My opinion when we embedded the video (from youtube or local) it will directly download when we open the page, so it means our user will need to await around (n * 1Mb) size until it open and it will take a lot of time (let us exclude lazy load for now since our main concern is how much data that user will need to open our landing page)
While My friend told me that it will only stream the data (download the data from server) when we play it. Unless we make it auto play
So our concern regarding this problem is that:
What if 1 embedded video have a size of 1-5 Mb (minimum) and we want to embed around 5 - 10 (minimum 5 video) video for our every feature we have in our landing page (we can input it in local files or Youtube, so bear in mind that the major case is around this two embedded method). So, isn't it will make Our page really slow since it need around 300 + (n*1000*5) Kb for open it in minimum video condition if it directly download the data when we only render it, or it will only download it after we click the play button
for example this is our simple embedded method:
<!DOCTYPE html>
<html>
<head>
<title>Embedded Video</title>
</head>
<body>
<h1>List of Features:</h1>
<div>
<h2>Feature 1</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<h2>Feature 2</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<h2>Feature 3</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<h2>Feature 4</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
...
<div>
<h2>Feature N</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/p_7dKsgXgV8" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</body>
</html>
can someone explain it to me regarding this video embedded can affect our landing page performance? it make me quite confused regarding this.
P.S:
Oh if you can, can explain what if we using <video> or <audio> tag too, is it have the same case as above too?
How can I remove the watch later and share buttons from youtube iframe embed player. Using the following embed code for embedding video clips.
i use this parameter but still not working
"showinfo=0" and "controls=0"
You can use the no cookie version of the video, to disable the "watch later" and "share" buttons.
If your embed code looks like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/HJtJXMKpl2g" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
You have to change it to this:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/HJtJXMKpl2g" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
or just check the checkbox in the youtube embed window.
This way, your URL will just look a little bit different:
https://www.youtube.com/embed/HJtJXMKpl2g
is changed to
https://www.youtube-nocookie.com/embed/HJtJXMKpl2g
and the "watch later" and "share" buttons will be hidden automatically.
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>
I am embedding youtube video in my site but it displays watch later, subscribe and share buttons. I want to remove them How it can be done?
<iframe width="560" height="315" src="https://www.youtube.com/embed/rYzD96YQ9Lo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" frameborder="0" allowfullscreen></iframe>
I have tried by using showinfo=0 options as well but it is not working.
I saw some similar questions on stack overflow but those answers are deprecated.
When we using YouTube embed's privacy-enhanced mode, it will hide share and watch later button. check below embed's code and image.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/KjKE4hD6e_Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>