I am trying to provide my visitors with a way to copy a video (youtube) embed URL. But of course when I add the embed string to my page it actually embeds the video. I tried to encode the URL but the characters that make up the special characters show.
This is what I have currently:
<div id="intro_url">%3Ciframe+width%3D%22560%22+height%3D%22315%22+src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2xxxxxxxxg%22+frameborder%3D%220%22+allow%3D%22autoplay%3B+encrypted-media%22+allowfullscreen%3E%3C%2Fiframe%3E</div>
I was hoping the user would see something like:
<iframe width="560" height="315" src="https://www.youtube.com/embed/TnxxxxxxXg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
but they get the html encoded version.
Question: Is it possible to show an iframe URL without actually adding an iframe to your page?
For your use case, its simple enough to replace the literal characters < and > (which is what signals/triggers html parsing of tags) with the html entities for those characters (i.e. < and $gt;)
Run my code snippet below and you'll see it renders the raw string that we expect our users to copy. (And if you try copying this into an html page, you'll see the embedded youtube video appear as we expect)
<iframe width="560" height="315" src="https://www.youtube.com/embed/TnxxxxxxXg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Related
I see the following code to embed HTML5 video
<iframe src="https://player.vimeo.com/video/12345?autoplay=1&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
My question is the query params given in the code above
autoplay=1&loop=1&autopause=0
Do that query params work directly with the video (meaning is that HTML5 standard which the browser understands) OR is this something which is mapped internally by the iframe page to the actual HTML5 attributes ?
They are just parameters passed to https://player.vimeo.com which interprets them and creates the <iframe> content based on them.
I'm trying to embed a youtube video on my site and no matter what video I embed it just says "an error has occurred." (This is the clearly explained problem)
I would like for the video to work. (This is the desired outcome)
<iframe width="420" height="315" src="https://www.youtube.com/embed/watch?v=039nv45oth8"></iframe>
(The above is the minimum needed code)
Try this code instead:
<iframe width="420" height="315" src="https://www.youtube.com/embed/039nv45oth8" frameborder="0" allowfullscreen></iframe>
Actually you don't have to write your code by yourself, just go to the video you want to add it in YouTube, then click the button "SHARE" , select "Embed" and you see the code is ready. Just copy it by clicking "COPY" then paste it in your html code.
I want to show a youtube video in html 4. For that, I am using iframe. But the content of iframe is not showing.
<iframe frameborder="1" width="420" height="345" src="https://www.youtube.com/watch?v=C8kSrkz8Hz8"></iframe>
FYI: I am using Firefox 29.0 and Chrome 35.0. Both browsers are showing the same result.
Change your src with //www.youtube.com/embed/C8kSrkz8Hz8
your code shoud look like this
<iframe frameborder="1" width="420" height="345" src="//www.youtube.com/embed/C8kSrkz8Hz8"></iframe>
Find code under each video on youtoube at Share menu.
When you try to put the whole YouTube page into an iframe, it sends a HTTP header called X-Frame-Options with the SAMEORIGIN value, which tells the browser, that the page can only be displayed in a frame on the same origin as the page itself.
You should use the provided embed code (you can find it below every YouTube video), which is also an iframe, but with a different URL. It will only show the player.
In this case, the embed code would be:
<iframe width="560" height="315" src="//www.youtube.com/embed/C8kSrkz8Hz8" frameborder="0" allowfullscreen></iframe>
replace you Iframe with this one. this works for you.
<iframe width="640" height="390" src="//www.youtube.com/embed/C8kSrkz8Hz8" frameborder="0" allowfullscreen></iframe>
missing attributes are: frameborder="0", allowfullscreen
You should change the youtube URL to remove the "s" so it looks like this:
<iframe width="420" height="345" src="//www.youtube.com/embed/C8kSrkz8Hz8" frameborder="1" allowfullscreen></iframe>
You should also be able to embed a youtube video from the page. Please see the screenshot attached:
I tried it this way and worked for me. Changing your src="https://www.youtube.com/embed/C8kSrkz8Hz8"
following the other parameters.
I'm brand new to HTML and trying to develop some basic skills and build a knowledge base by writing example pages. I copy and paste the default youtube embed code and paste it in my code. If I use the old code, I get a big white box. The new code yields a box containing dialog which states that firefox could not find the page. Chrome loads the object with no issues. Here is the code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/OIDnYMODZAQ" frameborder="0" allowfullscreen></iframe>
Try using http instead of https
<iframe width="560" height="315" src="http://www.youtube.com/embed/OIDnYMODZAQ" frameborder="0" allowfullscreen></iframe>
What I would like to do is supply some embed code for a PDF hosted on my website. The purpose is to allow anyone to take this code and slap it on their website ... pretty much exactly like YouTube videos or any other embedable content.
I've seen all forms of code, ranging from EMBED, OBJECT, IFRAME ...
Is is just a case of changing this sample YouTube code to point to my file:
<iframe width="420" height="315" src="http://www.youtube.com/embed/oRdxUFDoQe0" frameborder="0" allowfullscreen></iframe>
<iframe width="420" height="315" src="http://www.domain.com/embed/myfile.pdf" frameborder="0" allowfullscreen></iframe>
What method is the best and most accurate?
My favorite is google docs, extremely reliable and flexible:
<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
replace the url=... with your pdf url
Live example: http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html