I am trying to add a YouTube embed link on to a web page I did not originally develop (and therefore not that familiar with it) with lots of different things already going on with it (i.e. many other js calls, etc) - so in other words for a novice JavaScript debugger like me it is pretty tricky to identify things.
For some reason, the page changes any YouTube embed link to a near full screen width video. I want it to simply run as per the code I am pasting in, which for this example is:
<iframe src="//www.youtube.com/embed/tGvHNNOLnCk?rel=0" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
I can see the code it swaps it out with is:
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe src="//www.youtube.com/embed/tGvHNNOLnCk?rel=0" allowfullscreen="" frameborder="0" id="fitvid802730"></iframe></div>
When I turn JavaScript off, the embedded video displays at the right size, and uses the original code - so it's clear to me it has something to do with JavaScript.
Bearing in mind I am new to JavaScript debugging, What is the easiest way to somehow cleanly disrupt any operations on this kind of code so there are no manipulations done to the youtube embed code?
I am using Google Chrome dev tools.
Related
I have the following Iframe attached to my HTML code:
<iframe width="640" height="360" src="" frameborder="0" scrolling="no" allowfullscreen></iframe>
where the src can be any embedded video (like https://www.youtube.com/embed/fWa5kDtyV0w, for example). What I'm trying to do is the following: when the user pause the video, a function must be called to save the time of the video in a variable. However, I cannot find a way to this if, unless of using specifics APIs, like the one from Vimeo or Youtube (what I don't want to do, because some platforms don't have it). So, is there a way to interact with the video in the Iframe using JS or other stuff?
Extra information: In some of my tests, I got blocked by the browser by XSS.
I have a rather strange issue with my jPlayer. I have been using this player for about 2 years now, and it's worked great iframed from my server into a web page elsewhere. Recently I did move the players from GoDaddyto my hosted WHM server. I at least thought they worked properly after but now when you open a page with it the music names n title scrolls fine but no music.
But if you hit the pop out box upper right, a new pop out box appears, and it plays fine and no longer had the little square for the pop out. As an experiment I copied the pop out link back into the iframe and ended up the pop out link box wasn't there and still no music. I tried re-copying the entire player directory again from GoDaddy and had the same experience. Was there maybe a change with Chrome and iframe security?
If I put the link in the original iframe directly into the address bar in Chrome it works fine, as does the url that accompanies the pop out.
I'm a baby at best when it comes to this but often I don't hear from my developer for some time and I am trying to learn.
<IFRAME src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0"></iframe>
I can get to the various codes but this is the start. There are many players back ended into the same player vix XML file but none of that has changed. This also works fine in IE and Firefox.
It doesn't function in the Snippet because of strict security but it works in this `PLUNKER. I'm not sure what you are asking...
<iframe src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0" allowfullscreen></iframe>
The title pretty much sums my question up. I've given a cursory glance to https://developers.google.com/youtube/iframe_api_reference and have searched online but all I have found are explanations on how to get an embedded video to autoplay (the first video only) while preventing the suggested videos list at the end. I think that perhaps the logic for playing suggested videos is only supported on youtube.com itself, a conclusion that might be supported by the autoplay button being outside of the video element.
As a worst case solution, I thought maybe if I could save a youtube.com page to my desktop I could modify the styling to only show the video. But alas, the page breaks when I try to load it from my hard drive as opposed to the website.
Edit: Take note that I'm talking about two different types of autoplay here. One is the autoplaying of suggested videos as seen in the picture, and that is the type of autoplay I want to be able to use in an embedded player. The other type of autoplay that I don't need help with is getting the embedded player to automatically play the video that is contained in its iframe src, aka the first video.
Since you marked iframe under your tags and I can't comment, I will try to answer.
If you're using iframe then make sure
autoplay=1"
is on
<iframe id="ytplayer" type="text/html" width="720" height="405"src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1"frameborder="0" allowfullscreen>
I found a link that will build it for you. It was a bit into the api link you gave.
https://developers.google.com/youtube/youtube_player_demo
You can give it the video and tell it what you want it to do.
I have a simple iframe which is used to display a vimeo video on my site, as so:
<div class="video">
<iframe src="//player.vimeo.com/video/88893424" width="960px" height="540px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And it works like a charm on all standard computer browsers. Ajax is used throughout the site, and transitioning between pages that have videos and don't work exactly as you would expect - Ajax grabs the new page content, slides it on, deletes the old content, and the video works perfectly.
However, on iOS Safari, the video does NOT load. The space for the video is reserved - the other content on the page flows around the area where the video should be, which tells me the div is loading, and the height and width information of the iframe element is being registered by the browser. But no video, nothing. Reload the new page, though, and the video is there and plays just fine.
So my question is: Why is the reload required? What could I be doing wrong that is causing the AJAX to fail? I have read several answers across SO that seem to incriminate header information and cross-site drama, but it is danced around and not explained. Can anyone give me a clear understanding of what's going on here?
I want to have a Chromeless player that I can control via JS in terms of stop and start.
My player code, so far is:
<iframe class="video-frame" src="http://www.youtube.com/embed/xU1S011111?controls=0&showinfo=0" frameborder="0"></iframe>
I'm not sure how to interact with the JS API however.
Quite a few examples can be found here: https://developers.google.com/youtube/iframe_api_reference
You need to add &enablejsapi=1 to the URL, set an id, then add the JavaScript shown in that sample (using onYouTubeIframeAPIReady):
<iframe id="ytplayer" class="video-frame" src="http://www.youtube.com/embed/xU1S011111?controls=0&showinfo=0&enablejsapi=1" frameborder="0"></iframe>
I could copy and paste a bunch of example code, but you'll understand better if you read the docs. They're readable and easy to use.
Here's a fiddle demonstration: http://jsfiddle.net/BAqTe/