Here's what I'm trying to do. I have a bunch of thumbnails on a page and each one links to a page which has a youtube video embedded on it (so it's like a playlist). I was thinking it would be possible to simply swap out the current youtube embed rather than having it load an entirely new page.
The youtube embeds are iframes, so I'd need a way of, when clicking an image (I'm guessing javascript onclick might be the best solution) then have it change the current iframe to something else. I can do this linking to the pages which have the youtube embed, but I'd like to do it without needing to load a page - just grab some html and plug it in the iframe spot.
Any ideas?
You don't need to use javascript to load something into an iframe. You can add a name attribute to your iframe and then set the target of your link to that name. Something like this will work:
<iframe width="420" height="315" src="http://www.youtube.com/embed/zSgiXGELjbc" frameborder="0" allowfullscreen name="youtube_iframe"></iframe>
<p>load another video</p>
See a demo here: http://jsfiddle.net/q3Nas/
Related
I want to show http://www.youtube.com to a child page of my website. I use for this iframe html
iframe src="https://www.youtube.com"></iframe>
This is a result
enter image description here
And how legal it is in production
From what I know that is legal and safe to do is creating embeds to YouTube videos and being able to watch them on your website. You can get the embed code of any video on YouTube by right-clicking on a YouTube video and clicking on the copy embed code then just paste it into your html code.
Hope that's helpful!
I am working on a website in which proper url doesn't show up after copying from the embed button.
On clicking embed button(as shown below in an image), I am getting the following code inside iframe in which the value of src is not correct. It should be a proper video url.
<iframe src="//content.jwplatform.com/players/dalet_clips/35472P.mp4-88sIiZig.html" width="640" height="360" frameborder="0" scrolling="auto"></iframe>
The snippets of code which I am using inside jwplatform.js is:
"sharing": {
"code": "%3Ciframe%20src%3D%22http%3A//content.jwplatform.com/players/MEDIAID-6gKQPrHW.html%22%20width%3D%22480%22%20height%3D%22270%22%20frameborder%3D%220%22%20scrolling%3D%22auto%22%3E%3C/iframe%3E",
"link": "http://content.jwplatform.com/previews/MEDIAID-6gKQPrHW"
},
Problem Statement:
Inside iframe src, I am getting the following code //content.jwplatform.com/players/dalet_clips/35472P.mp4-88sIiZig.html which is not correct. It should be proper url of the video. I am wondering what changes I need to do so that I get the complete video url inside iframe src.
Try changing the code property in the sharing option in jwplatform.js to encodeURIComponent of whatever you want to be the exact iframe content
Example:
now you have the code as %3Ciframe%20src%3D%22http%3A//content.jwplatform.com/players/MEDIAID-6gKQPrHW.html%22%20width%3D%22480%22%20height%3D%22270%22%20frameborder%3D%220%22%20scrolling%3D%22auto%22%3E%3C/iframe%3E
Now try to decode this with decodeURIComponent(code) which evaluates to :
<iframe src="http://content.jwplatform.com/players/MEDIAID-6gKQPrHW.html" width="480" height="270" frameborder="0" scrolling="auto"></iframe>
You should try changing both code and link to your actual video link and code. just encode whatever content you want to be as code with encodeURIComponent or test the current one with decodeURIComponent, also keep the correct link in the link property.
Probably you are making a mistake when you say that:
//example.com it is not a valid url... - Nope. It's absolutely valid url. Even, it's better type of url (called schemeless url, without http: prefixing).
...there should be video url (mp4) inside SRC... - No again. iframes are for web-pages (including .html pages), or not files (like .mp4 or other file extensions), so that is the correct form of url.
I think your problem is something different:. Maybe that video file is deleted from server? Or something doesn't actually work on that destionation url? Check problems there.
p.s. you should have posted an example url which works (just change domain to example.com if you dont want to share it).
I noticed that when you embed sites like Youtube.com and Streamble.com, only the video appears in the iframe. How do they do that? Shouldn't an iframe load the whole webpage?
What I've tried:
Initially I thought you're supposed to wrap the mp4 file in og:video tags, but that didn't work.
How do they do that? By only serving up the video. Look at the url in the src attribute on the iframe. Load it up on a browser (you'll need to add http to the front of it) and you'll get only the video content.
I want to have an embedded Youtube video and when I click on an tag, it changes the iframe scr to an other Youtube video. The page should not reload completely, only the iframe if needed and the src it must be able to change again by clicking a different link.
Please help if possible!
You use a normal link, but its target attribute is the ID of the <iframe> you want to load it into. Example:
Page 1
Page 2
<iframe name="myframe" id="myframe"></iframe>
Of course, you will need to know the ID of the frame (if it has one) and how to format the link to insert.
I have a page with a YouTube video embedded in html. I want to stop the video when it's closed using the YouTube API. I have included SWFObject (and jquery), but I'm not able to control the video using any of the described methods.
document.getElementById()
swfobject.registerObject('id', 'version')
How can I control a youtube video using the js api without embedding it through swfobject i.e. by hooking up to the existing tag in the DOM?
Edit for clarification: The video is displayed in a lightbox that is opened by the user and closed by clicking outside it. I want the video to stop playing when the user closes this lightbox.
this might be a better way: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
embed as an iframe. you can still control it with javascript.