I am trying to embed a video onto my website but having difficulties with the standard embed code.
Here is a link to my webpage:
https://southhemitv.com/2019/07/08/test-jul-9-2019/
The standard embed code displays a very small video player with large black borders. Adding height="500" improves the size but then some extra features are added such as the chinese text at above the video.
I would like to hide this extra text so viewers only see the video and the player controls. (Edit) It has been suggested i store the video on my own server but i am not able to download certain videos and because its expensive most websites embed videos rather than store them on their server
If anyone could help it would be very appreciated.
The original embed code:
~<iframe src="//player.bilibili.com/player.html?aid=13125324&cid=21539921&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>~
Link to original video:
https://www.bilibili.com/video/av13125324/
Many thanks
Download the video, then serve it from your own server or via CDN, use a videoplayer that you like and supports your video filetype.
The apparent issue here is the player's graphical interface.
Since you fetch the video from a website, it uses that website's video player (I think?).
In any case, just manually download the video & use the video player of your choice.
I'm wanting a video to play automatically once it loads on a page. The video has no sound so shouldn't annoy the user too much.
The official YouTube answer for this query is to add &autoplay=1immediately after the video ID, and while that works in this CodePen test, it isn't working on my actual website page.
Elsewhere on Stack Overflow I've seen someone suggest that replacing the & with ? would work, however, doesn't work for me. (It doesn't break the video, it just still doesn't autoplay).
My embedded YouTube video
<div class="background-video" style="background-color: #ebebeb; height: 655px;">
<iframe width="100%" height="655" src="https://www.youtube.com/embed/bdw7V0vzQCs?&autoplay=1&rel=0&controls=0&showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
The site is built on Wordpress and is currently hosted locally on a MAMP server.
You should put ? in front of autoplay only if it's the first attribut added to your youtube url, otherwise you should use &.
Like so : your-url.com?autoplay=1 or your-url.com?key=value&autoplay=1
In your case you have ?& that should be replaced by only ?.
Your code is correct, i check video is auto playing create a new php file and check adding your code.
May be have some problem with site.
i have a wordpress website and i am using iframe to embed youtube video. Issue is when i click on fullscreen icon of video, my page with whole content go in fullscreen mode.
Its a weird issue and i have worked hours to solve this issue. Please check this link.
website link
using my code as:-
<iframe width="640" height="360" src="https://www.youtube.com/embed/Di7G4nbpyDg?feature=oembed" frameborder="0" allowfullscreen></iframe>
i know direct website links is not acceptable but this is something need to fix. Any response will be appreciated.
Thanks
On Wordpress use [youtube https://www.youtube.com/watch?v=XX11XX11X]
xx11xx11x is only example.
Wordpress wants to keep sites prtoected from iframes. So you are not able to publish <iframe>s.
Did you got it?
Edit: In your case use: [youtube https://www.youtube.com/watch?v=Di7G4nbpyDg]
like this:
I have no permission to show you the full video link.
Here is my embed code:
<iframe width="1920" height="1080" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
And here's how it's showing.
The video upload is 1080p and the poster image was chosen from the video (though I had the same issue with one that was a custom image) so I'm not sure what's missing.
Yes, this appears to be across all YouTube embeds. If it really bugs you, like it does me, I'd suggest showing the thumbnail and then swapping it out on click to the video with autoplay on. I wrote about doing this using jQuery years ago here: start/play embedded (iframe) youtube-video on click of an image
Your thumbnail is avaialble at: http://img.youtube.com/vi/YOURVIDEOID/maxresdefault.jpg
I was tidying up an AngularJS YouTube directive when they made this switch and I spent half an hour trying to figure out what I'd done to create that black border around the thumbnail until I looked around the internet at other embedded videos and noticed that it was YouTube system wide. Heh.
No idea why YouTube decided to do this, it looks horrible.
Try setting the iframe size using css, initially inline like this:
<iframe style="height: 1080px; width: 1980px" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>
If this works, neaten it up by giving the iframe an id and then add the dimensions as a rule to the external css file.
There are a few methods suggested for doing this online, but none of them seem to work.
For example:
http://blog.makezine.com/archive/2008/11/youtube-in-720p-hd-viewin.html
That article is about making it start in 720p, but it doesn't even work on their own video.
Does anyone here know how to do it?
(This answer was updated, as the previous method using vq isn't recognized anymore.)
Specifying the height of the video will change the quality accordingly.
example for html 5;
<iframe style='width:100%; height:800px;' src='https://www.youtube.com/embed/xxxxxxxx'></iframe>
If you don't want to hardcode the width and height you can add a class to the iframe for css media queries.
Tested on a working server + passes the w3.org nuhtml validator.
You can do this by adding a parameter &hd=1 to the video URL. That forces the video to start in the highest resolution available for the video. However you cannot specifically set it to 720p, because not every video has that hd ish.
http://www.youtube.com/watch?v=VIDEO_ID&hd=1
http://code.google.com/apis/youtube/player_parameters.html
UPDATE: as of 2014, hd is deprecated
https://developers.google.com/youtube/player_parameters?csw=1#Deprecated_Parameters
Youtube doesn't support playback quality anymore
This is an embed example of video played in HD 1080.
<iframe width="560" height="315" src="http://youtube.com/v/IplDUxTQxsE&vq=hd1080" frameborder="0" allowfullscreen="1"></iframe>
Let's break apart the code:http://youtube.com/v/ video_id &vq=hd1080
Video id for that video: IplDUxTQxsE you will see this type of random code in the link of every YouTube video.
So far so good, this trick works for playing full HD videos directly on webpages!
You can change the quality to 720 too. &vq=hd720
I've managed to get this working by the following fix:
//www.youtube.com/embed/_YOUR_VIDEO_CODE_/?vq=hd720
You video should have the hd720 resolution to do so.
I was using the embedding via iframe, BTW. Hope someone will find this helpful.
The first example below does not work for me, but the second one does (in Chrome).
<iframe width="720" height="405" src="//www.youtube.com/embed/GX_c566xYcQ?rel=0&vq=hd1080" frameborder="0" allowfullscreen="1"></iframe>
<iframe width="720" height="405" src="//youtube.com/v/IplDUxTQxsE?rel=0&vq=hd1080" frameborder="0" allowfullscreen="1"></iframe>
I believe the first one uses the new HTML5 youtube player whereas the bottom one (which works) uses the older flash player. However, the second one doesn't seem to load correctly in Safari/Firefox etc so probably not usable.
2021 here is my answer that works.
https://youtube.com/embed/ZkTzXrczk5M?vq=hd720p;feature=oembed&controls=0&hd=1&modestbranding=1&autohide=1&showinfo=0
The secret is in placing a "p" e.g. ?vq=hd720p not ?vq=hd720, after your desired resolution on the of the src.
None of the above solutions seem to work if the width/height is less than the line resolution of quality you select.
For example, the following doesn't work for me in Chrome:
<iframe width="720" height="480" src="//youtube.com/embed/hUezoHa1ZF4?autoplay=true&rel=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
I want to show the high quality video, but not use up 1280 x 720 pixels on the webpage.
When I go to youtube itself, playing 720p video in a 720x480 window looks better than 480p at the same size. I want to play 720p in a 720x480 window (downsampled better quality). There is no good solution yet afaik.
In case you're still wondering how to do it, then add: &feature=youtu.be&hd=1
Actually now I checked, this works only when you're sending the URL to someone else, not on embed.
Use this, it works 100% _your_videocode?rel=0&vq=hd1080"