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.
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">.
I want to solve the problem in Google Map when I do z-index: -1 Do not activate the map but the div is above the map as I want ... I want to activate the map with the div remains above the map
<div id="map" style="z-index: -1;"></div>
<div id="filter-div-for-sale-mobile" style="transform-origin: left 78.5px;top: 39px;left: -273.61px;width:360.5px;" class="zsg-popover_arrow-up zsg-popover-adjustable popover-thick-top popover-no-close popover-visible filter-button-popover listing-type-popover">
I would recommend using the iframe option provided by Google as it is much more controllable in regards to the CSS styling perspective of making it responsive on a page.
Sample of what I mean. (the width and height for the iframe attribute aren't required)
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/view?zoom=10¢er=51.5074%2C-0.1278&key=..." allowfullscreen></iframe>
It could be helpful to include the position of your element (fixed,relative or absolute ) etc.
Also what browser are you using?
I am working on an alphabets kid learning website, and want to play a sound on clicking an image. e.g. if user clicks on A(image) then in background sound of pronunciation of A must be played. Can it possible without using java script? Could anyone help?
Without JavaScript? I don't think so but the JavaScript is very easy.
You can play an audio element that you have put in your page withdocument.getElementById('audioTag').play();
So this should work:
<a onclick="document.getElementById('yourAudioTag').play();">
<img src="yourSrc.jpg">
</a>
JSFiddle.
You might even be able to put the onclick method into your image tag itself like so:
<img src="yourSrc.jpg" onclick="document.getElementById('yourAudioTag').play();">
You can then use the .pause() method to pause the audio and .load() if you would like to load some new audio. It works similar to the HTML5 video tag.
And if you don't want to use an element for the audio you can declare it like this:
var audio = new Audio('audio_file.mp3'); audio.play();
and use it the same way. Just instead of
document.getElementById('yourAudioTag').play();
you would use
audio.play();
An example of the whole thing would look something like this:
<a onclick="myAudioFunction('A');">
<img src="A.jpg">
</a>
<a onclick="myAudioFunction('B');">
<img src="B.jpg">
</a>
<script>
var aAudio = new Audio('a.mp3');
var bAudio = new Audio('b.mp3');
function myAudioFunction(letter) {
if(letter == 'a') {
aAudio.play();
} else if(letter == 'b') {
bAudio.play();
}
}
</script>
Interesting question.
Obviously, you should go for a JavaScript solution (like this post).
To quote css-tricks.com:
Again unfortunately, we can't tell an <audio> element what to do through CSS, so we'll need JavaScript.
However you have set up quite a nice challenge.
The <audio> element has the ability to show controls. In most browsers, the play button would come first from left in the controls.
Thus, if you wrap the appropriate <audio> element inside your letter element (<div>/<img>/ etc.), then, with a little absolute-positioning magic, and low opacity for the <audio>, you could put your letter "over the sound". So, when users click on the letter, they actually click on the play button.
If you use the browser's default controls, then you're browser dependent, as the controls dimensions do differ between browsers. However, you can create custom controls, or use players available in the market (like JPlayer), to have constant dimensions to fit to your letters.
Example and Demo:
The following code will make a click on the letter H play a sound of a horse, as long as you test it in a Chrome browser.
CSS:
div#lH {
position: absolute;
width: 30px;
height: 30px;
overflow: hidden;
z-index: 1;
font-size: 25px;
text-align:center;
}
audio#aH {
position: absolute;
top: -5px;
left: -5px;
z-index: 2;
opacity: 0.01;
}
HTML:
<div id="lH">
<audio controls id="aH">
<source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
H
</div>
Here's a JSFiddle.
I am embedding a local pdf file into a simple webpage and I am looking to set the initial zoom to fit to the object size. Here is what I tried but it is not affecting the zoom.
<embed src="filename.pdf?zoom=50" width="575" height="500">
does anyone know how to modify the code so its initial zoom is set to fit the object size.
Bit of a late response but I noticed that this information can be hard to find and haven't found the answer on SO, so here it is.
Try a differnt parameter #view=FitH to force it to fit in the horzontal space and also you need to start the querystring off with a # rather than an & making it:
filename.pdf#view=FitH
What I've noticed it is that this will work if adobe reader is embedded in the browser but chrome will use it's own version of the reader and won't respond in the same way. In my own case, the chrome browser zoomed to fit width by default, so no problem , but Internet Explorer needed the above parameters to ensure the link always opened the pdf page with the correct view setting.
For a full list of available parameters see this doc
EDIT: (lazy mode on)
For me this worked(I wanted to zoom in since the container of my pdf was small):
<embed src="filename.pdf#page=1&zoom=300" width="575" height="500">
This method uses "object", it also has "embed". Either method works:
<div id="pdf">
<object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
<!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
</embed> -->
<p>System Error - This PDF cannot be displayed, please contact IT.</p>
</object>
</div>
just in case someone need it, in firefox for me it work like this
<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>
Followed #Rich answer, I used view=FitH in my code to view PDF content base64 in Angular as below.
I shared for whom concern about view base64 content PDF file with object tag using Angular framework.
The option for view PDF
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
Read PDF content from API as
let content = DataHelper.getDataFromAPI();
When click show content button use
showData() {
let content = DataHelper.getDataFromAPI();
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
}
In HTML file use object tag as
<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>
Link Angular demo https://stackblitz.com/edit/angular-ivy-tdmieb
Bit late response to this question, however I do have something to add that might be useful for others.
If you make use of an iFrame and set the pdf file path to the src, it will load zoomed out to 100%, which the equivalence of FitH
Use iframe tag do display pdf file with zoom fit
<iframe src="filename.pdf" width="" height="" border="0"></iframe>
This works fine for me
<embed src=".file-name.pdf#zoom=FitH" width="100%" height="1930px" />
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>