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.
Related
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>
I want to embed videos on my site, but I don't want to keep videos on my server. I want something like an iframe, but I want to be capable to use links from any source, not just from youtube or vimeo. What can I do?
<iframe width="560" height="349" src="https://www.youtube.com/embed/FM7MFYoylVs?enablejsapi=1&playsinline=1&controls=0" frameborder="0" allowfullscreen id="video"></iframe>
Here is what i've tried but that's not what I need.:(
I think iframe should be your best choice, But as iframe is not what you need , you can also have a look at object
<html>
<body>
<iframe src="http://www.youtube.com/embed/W7qWa52k-nE"
width="560" height="315" frameborder="0" allowfullscreen></iframe>
<object data="http://www.youtube.com/embed/W7qWa52k-nE"
width="560" height="315"></object>
<object data="http://player.vimeo.com/video/214414572"
width="561" height="316" frameborder="0" webkitAllowFullScreen mozallowfullscreen
allowFullScreen></object>
</body>
</html>
support to vimeo videos depents on the target as vimeo videos are flash. so if you display a vimeo video using iframe or object then as long as device is supported, it will show the video
It is possible to have your own iframe and then embed the required iframe or src as required.
So you would have a MASTER iframe that when loaded will hold the youtube iframe inside. And you can do the same with each option that you are requiring. Just set your iframe size to match the others.
I'm making a hybrid app that requires a video to be played on the page, and not in the native fullscreen video player on an iPhone. I have tried webkit-playsinline in an iframe with the YouTube API, but it is not working. Heres the iframe code:
<iframe id="player" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/morestuffhere"
frameborder="0" webkit-playsinline></iframe>
I also put his in my viewDidLoad for Swift:
webView.allowsInlineMediaPlayback = true
But the native player shows up no matter what. What could I be doing wrong here?
The inline attribute should be placed on the video element, not on the iframe element. If you use the iframe method you cannot enable the inline playback this way since the actual video element won't have the required attribute.
<iframe id="player" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/morestuffhere&playsinline=1"
frameborder="0"></iframe>
Also put webView.allowsInlineMediaPlayback = true in viewDidLoad for Swift
I got some youtube urls, such as https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg. When I put it to html video tag, it said "Invalid source".
How to solve this problem?
When I used iframe to display videos, I had another problem as described here: Video not showing in iframe on IE, but showing on firefox and chrome.
This is my HTML:
<video width="300" height="auto" autoplay="" controls="" name="media"><source src="https://www.youtube.com/embed/LaXGkW_-Nvc?list=RDTDDDvaoGiDg"></video>
You can't use the HTML5 video tag for youtube videos, it only supports files that are either MP4, WebM and Ogg. W3C Schools
Youtube already provides you with an "embed" function on their page which auto generates the iFrame for you. Youtube Embed There are a few other methods but they are no longer used (deprecated). Youtube API
As for the issue with IE, maybe have a look at this similar question: YouTube iframe embed code not working in IE
The only way around the issue if you want to use the HTML5 video tag is to download the Youtube video in one of the specified formats.
You need to use the <iframe> tag to embed the YouTube. Please read the code below:
<iframe src="https://www.youtube.com/embed/5L3wKniOnro?autoplay=1" width="600" height="400" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
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.