So I developed an app that fetches the youtube video for songs. 2 months ago this worked without fail. Came back to my app and suddenly getting the static-y error "This video is unavailable".
Double checked that the video on Youtube is actually there and plays, and I also checked to see if the uploader allows embedding by using https://www.googleapis.com/youtube/v3/videos?id=l-EdCNjumvI&key=[MYKEY]&part=snippet,contentDetails,status
I got the status response as follows:
"status" : {
"embeddebable" : true
}
So I know I should be able to embed that particular video.
Any advice?
I am able to put other non-music videos into the iframe without fail.
Works:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/PUvWR0HdQmg" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
Doesn't work:
<iframe width="560" height="315" src="https://www.youtube.com/embed/l-
EdCNjumvI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
Edit: it seems music videos need a server to be running in order to play. I don't know why this is, but I started a simple http server using
python -m http.server 80
and for some reason that is above my expertise, that worked
After testing your two pieces of code, it seems that the spaces in the second example may be the problem.
Instead of
<iframe width="560" height="315" src="https://www.youtube.com/embed/l-
EdCNjumvI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
consider using
<iframe width="560" height="315" src="https://www.youtube.com/embed/l-EdCNjumvI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
where there are no spaces after the hyphen.
This may be due to the fact that the spaces in your example are WITHIN the src string, meaning that in your original example, the src string was
src="https://www.youtube.com/embed/l- EdCNjumvI"
rather than
src="https://www.youtube.com/embed/l-EdCNjumvI"
Related
I have made a website, where the logo looks ok when I open it in my laptop browser. However, it doesn't show up in my iPhone or iPad browser. I tried Safari, Chrome, Brave, the same...
this the code in my html file:
<div class="header-logo logo animated" data-animate="fadeInDown" data-delay=".6">
<a href="./" class="logo-link">
<img class="logo-dark" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
<img class="logo-light" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
</a>
</div>
I have found another stackoverflow questions, the answer says it's because the image size, but I don't think so. My original size is only 1310x242 pixel. and I also tried to reduce the size to only 300x56. It still doesn't show.
Your help is highly appreciated!
okay, I sorted out myself.
It's the srcset, obviously it defines the set of images we will allow the browser to choose between, and what size each image is. So I forgot to update it to the image that I want in srcset.
I've been working on a website locally, creating the web page using Dreamweaver and the latest version of Bootstrap (v 2.3.2). I've been testing it in different browsers and the images seem to load correctly in all of the other browsers (Chrome, Firefox, and Safari). When I go into Internet Explorer 8, some of the PNG files I created load correctly while others don't load at all.
Here is how it looks in Chrome:
Here is how it looks in IE8:
I read through many solutions. The first here, where I went into the Developer tool and did an image report. In the report, as seen below, shows it can read the ALT tags but can't seem to read or think the image link is broken:
Knowing this, I tried finding a more in-dept solution, including this post. Thinking it could possibly be the way the picture was created, I tried multiple ways of creating the images (including changing the format of the file to RGB 8-bit in Photoshop and copying/pasting the vector images from Illustrator to Photoshop) and then removing the browser cache every time I would modify the images and restart the browser. None of it seems to work!
I was wondering if there was something else I could possibly try?
The code I'm currently inserting these images are through the HTML:
<div class="span4">
<div id="applicationInfo">
<p>Application #:<br />
PI: <br />
Status: <br />
Disposition:
</p>
</div>
<ul>
<li>PI / CoPI Information<img src="images/incomplete.png" /></li>
<li>Project Information</li>
<li>Funding Information</li>
<li>Proposal Summary<img src="images/complete.png" /></li>
<li>Proposal Narrative</li>
<li class="current">Current Research Summary<img src="images/complete.png" /></li>
<li>Budget</li>
<li>Publications List</li>
<li>Supplemental Information</li>
<li>Save <span class="small">(without submitting)</span></li>
<li>Submit</li>
</ul>
</div>
This post helped a lot! What helped was making sure to have the images saved as RGB 8-bit or 16-bit. I usually have it defaulted at 16-bit to give more color.
Best of luck to anyone looking for this answer!
I'm building a page that has links on the left of the screen that target an iframe. They work just fine in the new IE, but not at all in FireFox. I've played around with their Z-index, but can't seem to get them to be recognized in FireFox. They don't just not work, but the mouse cursor doesn't even show that they are links on hover. The address for the page I'm working on is at the address below.
http://www.snoscoot.com/fcaccessories/hondapowerequipment/test.html
An example of the code for one of the buttons is as follows:
<A HREF="http://www.snoscoot.com//fcaccessories/hondapowerequipment/subcompacttractorpartsandinformation.html" TARGET="productdisplay"><IMG SRC="http://www.snoscoot.com/fcaccessories/hondapowerequipment/hondatractorparts150px.jpg" border="0">
<font size="3" color="black" face="Arial">Subcompact tractor parts</font></a>
The code I have for the targeted iFrame is as follows:
<IFRAME
SRC="http://www.snoscoot.com/fcaccessories/hondapowerequipment/compacttractorpartsandinformation.html"
NAME="productdisplay"
WIDTH=700 HEIGHT=1622
frameBorder="0"
scrolling="no">
</IFRAME>
Would anyone have some advice as to how to get the links to function in FireFox? I can't seem to figure out why they work in IE, but not in FF.
Thanks
Your iframe inside the <div id="dropdown"> is 1500px tall by 950px wide and hence covers up most of the rest of the page. In particular it's sitting above those links, so they can't be clicked.
Are you sure you want it to be 1500px tall?
In html page,I can embed vlcplugin as mentioned in videolan page, and get the reference to plugin using jquery.
But it seems that the play(), pause() methods are supported only by vlcplugin upto 0.8.5. How do you play and pause a recent version of plugin?
<embed id="vlcp"
type="application/x-vlc-plugin"
pluginspage="http://www.videolan.org"
name="VLC"
autoplay="no"
loop="no"
volume="100"
width="640"
height="480"
target="test.flv">
</embed>
<a id="playbutton" href="#">Play</a>
<a id="pausebutton" href="#">Pause</a>
I can get reference to the plugin as below
var player = document.getElementById("vlcp");
Now, what do I call to make the embedded plugin play the clip?
I am using firefox as browser, will embedding vlcplugin in html work in chrome ?
You have to use the Playlist object of your VLC player as showed here.
In your particular example, you didn't really create an actual playlist, but you implicitly added one item to it (your "test.flv").
Here's how you can now control your movie (regardless of whether it's Mozilla, Chrome, or IE) - code in CoffeeScript:
player = document.getElementById("vlcp")
if player and player.playlist
// you could also check whether the playlist isn't empty using
// player.playlist.items.count
playlist = player.playlist
// pick whichever action you need from below
playlist.play()
playlist.togglePause()
playlist.stop()
You can also check whether the player is currently playing or paused/stopped by using
// assuming you got the playlist like above
playlist.isPlaying
Here is a demo example:
<html>
<head><title>Demo of VLC mozilla plugin</title></head>
<body>
<h1>Demo of VLC mozilla plugin - Example 1</h1>
<embed type="application/x-vlc-plugin"
name="video1"
autoplay="no" loop="yes" width="400" height="300"
target="http://server.example.org/video1.vob" />
<br />
<a href="javascript:;" onclick='document.video1.play()'>Play video1</a>
<a href="javascript:;" onclick='document.video1.pause()'>Pause video1</a>
<a href="javascript:;" onclick='document.video1.stop()'>Stop video1</a>
<a href="javascript:;" onclick='document.video1.fullscreen()'>Fullscreen</a>
</body>
</html>
Other useful sources/links:
http://www.videolan.org/doc/play-howto/en/ch04.html
http://www.w3.org/2010/05/video/mediaevents.html
I have used facebook like box in the past with yahoo sitebuilder and never had any problem creating code from http://developers.facebook.com/docs/reference/plugins/like-box/ and pasting it to html box. Now with facebook changes it wont work any more.
past code: (works fine)
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F%23%21%2Fpages%2FCedar-Park-TX%2FPromotional-Product-Specialty%2F113782388677670&width=292&colorscheme=light&connections=10&stream=true&header=true&height=587" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:587px;" allowTransparency="true"></iframe>
new code: (doesnt work)
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FPromotional-Product-Specialty%2F113782388677670&width=292&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true&appId=306388216066339" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
I got this bug as well, what you have to do is put http: infront of the //www.facebook.com
so it goes from this:
<iframe src=//www.facebook.com..........
to this:
<iframe src=http://www.facebook.com..........