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">.
Related
I am using iframe to embed an Excel file into a HTM page using the Microsoft OneDrive embed function, and it will display the excel file, but it doesn't embed it, it makes the entire page the excel file.
So it takes over the entire page, I lose the sidebar and toolbar of my site that has the navigation.
I tried containing it within a div and apply class styles to both the div and the iframe, which is what I used for my PDFs that I embed that work fine, but it still did not restrict the excel file to an embedded window.
This is what I am using for the excel iframe:
<body>
<iframe width="100%" height="100%" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?resid=7CDAFECF25AB92FC%21110&authkey=%21AGaGmMnPaiFZ0Ew&em=2">
</iframe>
</body>
And this is what I use for my PDF iframe:
<body>
<div class="container"><iframe class="responsive-iframe" src="PS-U-A150FUI.pdf"></iframe>
</div>
</body>
EDIT: Here are images to better show the issue, first image is a PDF correctly imbedded within the webpage.
Second is the excel doc that has overtaken the webpage.
PDF Embed
Excel Embed
Your code reads:
<iframe width="100%" height="100%" frameborder="0" scrolling="no" src="https://onedrive.live.com/embed?resid=7CDAFECF25AB92FC%21110&authkey=%21AGaGmMnPaiFZ0Ew&em=2">
</iframe>
You have used 100% width and 100% width in your HTML. So the iframe takes up the complete screen.
Take an example: you need the frame to be 500px wide and 700px long, then you could have used the width=“500px”
and the height=“700px” attributes in your iframe or used the following css:
iframe {
width: 500px;
height: 700px;
}
What basically I want to say is, that you should use smaller pixel-values/percentages for the iframe.
I have a iframe in my web page of a video from another site but when i click play or anywhere in the iframe space it opens a link to the site with the video of it.
I'm trying to make a site for playing series and i want to use iframe to show the video from another site rather than downloading it.
I've tried everything but i viewed the other sites source code and it seems it has some java code i suppose that's causing the issue preventing the iframe from working.
http://entervideo.net/watch/94c96f7dc0bd33c
that's the link above, could you kindly inspect the source code first.
This is the code that I tried:
<iframe style ="display:block; margin: 0 auto;" width="1238" height="696"
allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
frameborder="0" src="http://entervideo.net/watch/94c96f7dc0bd33c"
scrolling="no" target="_self"></iframe>
(Down below is the java script code from the link and I think it's causing the problem)
<script>
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
console.log(document.referrer);
console.log(inIframe());
//if(!document.referrer&&inIframe()) document.write('<a
href="http://entervideo.net/watch/94c96f7dc0bd33c" target="_blank"
style="position:fixed; display:block; height:100%; width:100%; z-index:99999;
top: 0;left: 0; background: rgba(255, 255, 255, 0.1);color:#fff;font-
size:30px;">Please remove sandbox tags on the iframe.</a>');
if(document.referrer||!inIframe()){
var element = document.getElementById("ptc");
element.parentNode.removeChild(element);
console.log('deleting');
}
</script>
i want it to play the video on my web page when i click on the play button on the control rather than it opening the link to the other site.
Replace target="_blank" with target="_self" in JavaScript.
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've messed up my main question so I here I go again.
I have a mainrecord.html that uses iframe to display 2 html - top and lower. On the top html page I have a save button. This save button does some data work and then goes to a different html. The problem is the lower iframe is still there. Here is what I have in the mainrecord.html:
<iframe scrolling="no" noresize target="middle" src="<%=JustPath(oProp.ScriptPath)+[/top.html?id=]+tmpid"%> name="top" height="62%" class="auto-style1" style="width: 100%">You need a Frames Capable browser to view this content.</iframe>
<iframe scrolling="no" noresize target="middle" src="<%=JustPath(oProp.ScriptPath)+[/lower.html?id=]+tmpid"%> name="lower" style="width: 100%; height: 35%">You need a Frames Capable browser to view this content.</iframe>
<script type = "text/javascript" >
element = document.getElementById("lower");
</script>
In the top.html there is a save button that goes to a saverecord.html. I do some data work and then I do this:
<script type="text/javascript">
document.removeChild(element);
</script>
<% oResponse.Redirect(JUSTPATH(oProp.ScriptPath)+[/viewrecords.html])%>
It correctly displays viewrecords.html. However, the iframe containing lower.html is still there.
Any suggestions?
TIA.
You need to refer to a wrapping element in your JS to remove this Iframe.
<div class="frame2">
<iframe scrolling="no" noresize target="middle" src=""..." name="lower" style="width: 100%; height: 35%">You need a Frames Capable browser to view this content.</iframe>
</div>
JS
element = document.getElementById("frame2"); <-- this is the wrapper for your Iframe
document.removeChild(element);
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>