I am using youtubes new iframe code to embed video but the videos seem to be lower quality than if I watch them on youtube. Is there a way to embed the high quality video?
My code at the moment is
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY" frameborder="0" allowfullscreen></iframe>
&vq=hd720 or &vq=hd1080 did the trick where all else failed
The following code did the trick for me:
<iframe width="241" height="136" src="https://www.youtube.com/embed/NMG0CMkuUnA?version=3&vq=hd720" frameborder="0" allowfullscreen></iframe>
Try this for specific quality of video..
144p : &vq=tiny
240p : &vq=small
360p : &vq=medium
480p : &vq=large
720p : &vq=hd720
example :
<iframe width="320" height="350" src="http://www.youtube.com/embed/
HeQ39bLsoTI?autoplay=1&cc_load_policy=1&vq=tiny" frameborder="0"
allowfullscreen></iframe>
Also, it seems that YouTube now automatically serves up the quality that it thinks is optimized for the size of the embed, for iframe and AS3, regardless of whether or not the HD parameter is set.
See this post, and this for more information.
UPDATE: See Jason Renaud's answer for a good method that allows explicitly forcing the quality type. I tried it with an HTML5-embedded player, and it worked as expected.
It seems that the answer changes with time.
To look at the meta of what is going on, it seems that there are two generalities to the desired effect.
1) You can try and 'hack' the iframe code itself.
2) You can try and create a container to trick the iframe into thinking it should display HD.
Let's do both.
[ SPECIFIC IFRAME CODE]
You can possibly edit the typical embed youtube iframe link using current standards. I would recommend using a base size that would demand that size anyways and proceeding with step two to resize it.
Look up a current listing such as the one on h3xed to see the way youtube calls the files when embedded.
Of note, I didn't find the following code anywhere, I discovered it. I need to call videos that are 720. I was looking for the answer to this question and when viewing the file I noted that it said 720p60 as the actual youtube setting.
So I altered what seems to have worked before and sure enough...
<div class="responsive-container" >
<iframe width="780" height="480"
src="https://www.youtube.com/embed/DFzUdTUaAr4?rel=0&vq=hd720p60" frameborder="0" allowfullscreen></iframe>
</div>
worked.
Note that essentially I added ?rel=0&vq=hd720p60
And made the iframe size large enough to demand hd.
[ CREATING A CONTAINER ]
This works because you are asking youtube for a higher quality video and then going behind it's back and resizing it to fit the space you desire. Although you directly ask how to embed, I'm assuming you're asking to embed whenever and wherever you want - not being restricted to giant videos on page for high quality files.
A simple responsive container works well since iframes are made to be controlled through CSS. Using code similar to that found on thenewcode's Force-Embedded-Youtube-Videos-To-Play-In-HD article we create a code that restricts the aspect ratio to a limited size.
.responsive-container {
position: relative;
padding-bottom: 53.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container,
.responsive-container iframe {
max-width: 1280px;
max-height: 720px;
}
.responsive-container iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
*Of note: 'Legacy' code of &fmt=35, &fmt=22, or &fmt=37 works at this point for video links. The youtube video opens up at this specific quality.
Also note that you also have to notice a difference in tdl between youtube videos and embedded videos. They are (from my experience) not cross compatible. * (youtube.com/embeded... VS youtu.be/...)
Oh I've found it now you have to put ?vq=hd720 on the end of the url like so:
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/embed/6X3zUh8RqbY?vq=hd720" frameborder="0" allowfullscreen></iframe>
Related
I have a web-page that allows the user to enter YouTube video URLs and display them in thumbnail previewers which do not auto-play them. When the user enters the URLs:
some may be valid and load,
some are not valid and don't load,
some, while valid URLs aren't embeds with URLs similar to
https://www.youtube.com/watch?v=NCZaq9pSBxQ and don't load, and
finally, while very rare, are valid, aren't embeds, but still load.
So, I don't want to prevent the user from entering any of these YouTube URLs, embed or not. Instead, I want to detect when the YouTube video doesn't load.
Here is some of the HTML 'code' that I'm using that shows one YouTube that doesn't load and one that does:
function update_ytplayer2( This ) {
// validate the textarea's value -- omitted
document.getElementById( 'ytplayer_2' ).src = This.value.trim();
}
.webvideourlPreview {
height: auto;
width: 75px;
max-height: 110px;
margin-right: 3px;
}
textarea {
width: 400px;
}
<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
video="true" youtube="true" style="display: block;"></iframe>
⁝<br />
<textarea onblur="update_ytplayer2( this );">https://www.youtube.com/embed/0376xWdwBBs</textarea><br />
⁝
<iframe id="ytplayer_2" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/embed/0376xWdwBBs"
source="https://www.youtube.com/embed/0376xWdwBBs"
video="true" youtube="true" embed="true"
style="display: block;"></iframe>
Here is a codepen that shows the second iframe like it does in my web-page. which uses the same code and css styles as used above.
Here is what I see in the Chrome Browser's Inspect Element panel:
⁝
<!-- Non-Working YouTube Video -->
▼<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
video="true" youtube="true" style="">
</iframe>
⁝
<!-- Working YouTube Video -->
▼<iframe id="ytplayer_2" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/embed/0376xWdwBBs"
source="https://www.youtube.com/embed/0376xWdwBBs"
video="true" youtube="true" embed="true" style="display: block;">
#document
<!DOCUMENT html>
▶<html lang="en" dir="ltr" data-cast-api-enabled="true"
wtx-context="AE89359A-CCF4-46DF-933F-36746B4B5815">
</html>
</iframe>
⁝
Both of the iframe tags are open, but I noticed that the non-working YouTube doesn't show anything between the open and close iframe tags, but the working YouTube does.
Is there some way that I can detect this in javaScript?
I saw that there was a .contentDocument property, but in Chrome this is always null, and there is a .contentWindow property, but both the non-working and working YouTube videos pretty much appear to show the same object/structure and so far I haven't found anything in the object that I can use to programmatically determine which video isn't working and which is.
I understand that there are two events that can be used, error and load, according to the information that I've found on these event because I'm not loading a file into the iframe, the events don't 'fire' whether the YouTube video loads or not.
I also saw somewhere in StackOverflow that the native size properties contain size of the small sad-face graphic, but I don't see how to get that information, especially since the .contentWindow doesn't appear, as far as I can tell, to these properties when I inspect these elements. However, I'd rather not rely only on the size of the image alone to determine the failure of the load.
Thanks
Actually YouTube doesn't allow 3rd parties to embed their site directly.
That is why using links like https://www.youtube.com/watch?v=NCZaq9pSBxQ or https://youtu.be/NCZaq9pSBxQ will raise Refused to display 'https://www.youtube.com/watch?v=NCZaq9pSBxQ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. warning in your console.
Fortunately Youtube offers "embed video" option, to allow us to embed videos. Using this feature I had written my code. Check out this snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
.webvideourlPreview {
height: auto;
width: 75px;
max-height: 110px;
margin-right: 3px;
}
textarea {
width: 400px;
}
</style>
<script type="text/javascript">
function update_ytplayer2( This ) {
//capture trimmed value
let val = This.value.trim();
let embed_src;
if(val.includes('watch?v='))
embed_src = This.value.replace("watch?v=", "embed/");
else if(val.includes('youtu.be'))
embed_src = 'https://www.youtube.com/embed/'
+ val.split('/').pop();
// validate the textarea's value -- omitted
document.getElementById( 'ytplayer_2' ).src = embed_src;
}
</script>
</head>
<body on>
<iframe id="ytplayer_0" class="webvideourlPreview" scrolling="no"
src="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
source="https://www.youtube.com/watch?v=NCZaq9pSBxQ"
video="true" youtube="true" style="display: block;"></iframe>
⁝<br />
<textarea onblur="update_ytplayer2( this );">https://www.youtube.com/watch?v=NCZaq9pSBxQ</textarea><br />
⁝
<iframe id="ytplayer_2" class="webvideourlPreview"
style="display: block;"></iframe>
</body>
</html>
In the snippet, inside function update_ytplayer2 we using val variable to save trimmed value of our <textarea>. Next depending on the type of link, we may or may not altering it to get link in the form of https://www.youtube.com/embed/[unique_identifier] and save it into another variable embed_src.Finally, setting embed_src as our <iframe> source.
Function update_ytplayer2 called each time user generate blur effect on <textarea> by moving focus away from it which in turn updates the video shown in <iframe id="ytplayer_2">.
Note: I had removed the HTML5 non-standard attributes from the <iframe id="ytplayer_2">.
This is my first time posting here and don't really know much about web coding or CSS. I'm a CGI artist who is trying to implement a simple feature. I would like to showcase my Demoreel on my website, figured out how to add the video in, but the position is on the far left of the screen. I'm using Artstation web builder, they don't have an option to implement the video visually. I like to place it in the middle of the screen for the website before showcasing projects since its a built website there are lots of coding and hopping can implement the position code in the middle of without adding in an extra function and such.
I'm using the Firefox Inspector to change the coding when trying to add a position just add a text rather the action on the website.
Any answers regarding to this are very appreciated
Thanks!
<div>
<iframe src="https://www.youtube.com/embed/Ywzukda7WsI" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0">
</iframe>
</div>
What it looks like now on the website
In the iframe, add:
<iframe style='display: block; margin: 0 auto;'>
And that should work.
I tried it on JSFiddle:
https://codepen.io/Rohittt/pen/eQwLYe
you can just copy the code from here or the JSFiddle!
Hope I helped you!
I have tried the following code:
<iframe controls="0" autoplay="0" class="embed-responsive-item" src="videos/first_video.mp4"></iframe>
I have tried many things but not getting any solution. I want to disable the autoplay on the video and don't want to use <video> tag so its possible without <video> tag?
I think this is what you want.
function a() {
var iframe = document.getElementById("iframe");
iframe.src = "video.mp4"
}
<iframe src="imagename" height="200" width="300" id="iframe"></iframe>
<button onclick="a()">Play</button>
iframe does not support this by default. Why do you not want to use video tag? The only thing I can think of to make it look like an iframe without autoplay is with help of javascript.
First set the iframe src to empty or leave the src out.
Set a picture as iframe background to make it look like the video.
<iframe style="background-image:url(picture.png)" id="frame" controls="0" class="embed-responsive-item" src=""></iframe>
Then create an onclick event for that iframe and change the iframe src
function loadVideo() {
var frame = document.getElementById("frame");
frame.src = "video.mp4";
}
I would consider using video tag or a plugin that works on every browser.
According to this article the syntax should go like this:
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen"></iframe>
<iframe src="https://cross-origin.com/myvideo.html" allow="fullscreen"></iframe>
<iframe src="https://cross-origin.com/myvideo.html" allow=""></iframe>
This is fairly new (at least to me) and I don't see explicit directions as to how autoplay is shut off. Try either the second or third example. This is part of the new feature policy called iframe delegation which will go into full effect on april 2018. I will add onto this answer if I find more concrete info.
I will try and be as thorough with my question as possible the first go round. My question is this:
I am trying to embed a Vimeo video on to Blogger that plays at a specific timestamp, i.e. 4mins 32secs, instead of the beginning of the video without it autoplaying. The video will embed fine at the timestamp but it will autoplay and I cannot figure out how to turn that feature off. The code for the video is below:
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s" webkitallowfullscreen=""width="500"></iframe>
I have tried various methods "?autoplay=0" etc. but I guess I am not getting the code right.
Any help would be greatly appreciated
have you tried like this ?
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s?autoplay=0" webkitallowfullscreen=""width="500"></iframe>
if it didn't work then try to find it by inspect element, it may be changed to ?autopplay=1 after page load,
so try this method it worked for me
first your html, paste a screenshot of your vimeo video in an image tag and define an onclick function for that and bind iframe on click function,it should work
here is the code
<div id="parent-div" >
<img id="vimeo-video" src="images/homeVideo.png" onclick="return imgClick();" />
</div>
and your javascript function
function imgClick() {
jQuery('#image-for-video').hide(); //hide the image to display your video
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://player.vimeo.com/video/1992892829?autoplay=0");
ifrm.style.width = "496px";
ifrm.style.height = "277px";
// add rest of your values
ifrm.frameborder = 0;
document.getElementById("parent-div").appendChild(ifrm);
return false;
}
I need to know the following...
I have a video embed in html using tag, the page that I'm building is using the z-index, the idea is to use layers... everything was fine until, the media embed...
I have a video on full screen 100% width and height ...
<style>
.bg_vid {
position: absolute;
z-index 10;
w: 100%
h: 100%
}
.btns {
position: relative;
}
.btn-overlay-vid {
bg: url'img/pattern.png';
position: absolute;
z-index: 30;
}
.btn-video {
z-index: 25;
}
</style>
<div class="btns">
<div class="btn-overlay-vid"></div>
<div class="btn-video">
<object width="300" height="169">
<params name [...]> </params>
<params name [...]> </params>
<params name [...]> </params>
<params name="wmode" value="transparent" > </params>
<embed [...]&embed=transparent ></embed>
</object>
</div>
</div>
<div class="bg_vid">
<iframe [...] />
</div>
So the background video for the full "screen" is working fine, but, the button video is not working... I mean the overlay div still behind the now this only happen for almost all browsers but Google Chrome .. in Google Chrome is working good...
the video is behind the overlay div which is just an image for(for now), so I wonder why in IE(not surprise there) and Firefox is not working...
Thank you.
Try giving .btn-video a position, relative or something. z-index doesn't like undeclared positions.
I had to change my Java that I was using for the tag... and by doing so, I can now use &wmode=transparent in my , Say I want to send the iFrame to the background of any other layer...
<iframe
class="behind"
type="text/html"
width="300"
height="169"
src="https://www.youtube.com/embed/7SyAejEiiLw?autoplay=1&controls=0&loop=1&modestbranding=1&rel=0&showinfo=0&color=white&wmode=transparent" frameborder="0" allowfullscreen></iframe>
Now I can dance like the guys in that video...
Note: If you want to use the "Params" like in this demo I suggest you use the YouTube API instead, it will work as standalone but is always better to use the API, more control over the YouTube Player.
So my conclusion to this is NEVER limit an HTML TAG, I was reserving the iframe tag for other purposes and by doing so I was forcing my self to use the object tag for media files, also was limiting the use of my site on other devices such as tablets or smartphones, the tag is not so friendly with those devices.