I'm wanting to create a "Latest Video" block on my website, but I only need the YouTube thumbnail image and MAYBE the title of the video. I found a method for doing an embed for the latest video itself, but I'm uncertain if I can modify it for just the thumbnail.
<!DOCTYPE html>
<html>
<head>
<title>YouTube Recent Upload Thing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>
Can this be repurposed for my idea? And how can I do it if it can't? I have basic HTML and CSS knowledge, with a very limited understanding of javascript and php. If I can just get something that will swap the thumbnail and ideally display the title, I can handle styling and implementation. Also interested in the same for specific playlists' most recent addition, but that doesn't have to happen.
Not sure if this is what you mean but you can try something like:
<div onclick="this.style.display='none'; this.nextSibling.style.display='block';"><img src="image.png" style="cursor:pointer" /></div><div style="display:none">
<!-- Embed code here -->
</div>
Related
I am trying to insert a Facebook embed video on my HTML code. Following is the sample code provided in the Facebook player documentation.
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId: "{your-app-id}",
xfbml: true,
version: "v3.2"
});
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe("xfbml.ready", function(msg) {
if (msg.type === "video") {
my_video_player = msg.instance;
}
});
};
</script>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<!-- Your embedded video player code -->
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-allowfullscreen="true"></div>
</body>
</html>
But on iOS devices, it is playing only in fullscreen mode. Is there a way I can play video without going to fullscreen?
Thanks!
I used the website tsviewer.com to create an insertable piece of HTML code I can insert into my webpage that will display the status of my Teamspeak server. This is what it gave me. But this doesn't quite work in vue as I don't know where to place the scripts.
<div id="ts3viewer_1118023" style=""> </div>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "https://www.tsviewer.com/ts3viewer.php?ID=1118023&text=757575&text_size=12&text_family=1&text_s_color=000000&text_s_weight=normal&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_i_color=&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_c_color=&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_u_color=000000&text_u_weight=normal&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_s_color_h=&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=none&text_i_color_h=000000&text_i_weight_h=bold&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=none&text_c_color_h=&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=none&text_u_color_h=&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none&iconset=default";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
Discord on the other hand gives a single line of code that is easily inserted and works perfectly.
<iframe src="https://discordapp.com/widget?id=261587898996883458&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
The question is, how does one convert the one kind to the other kind? Thanks
you need to add the Javascript before the tag of your
website ends.
important is than that you render an div which the right id
Here some example
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "[add here the whole teamspeaker snippet url]";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<div id="ts3viewer_1118023" style=""> </div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>
I have removed the tsviewer code in his full length because the list is public.
You should add him there [add here the whole teamspeaker snippet url]
Maybe you should also modfiy your post after it or change the url as an example.
I'm attempting to add drag-and-drop to my chrome app. Here is the code, but I can't get it to work. Is there something I need to enable? Or am I not including something? I'm simply trying to get something to work that places one div inside another.
<!DOCTYPE html>
<html>
<head>
<title>EOS</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div id="open-player-position" class="open-position" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="player1" class="collapsed-player" draggable="true" ondragstart="drag(event)">
<h4>Player 1</h4>
</div>
</body>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</html>
First, you must include your script code in javascript files, not inline, due to packaged apps Content Security Policy. This alone is likely the cause of your code not working.
Then, see examples of drag in drop in the samples. E.g. Image Edit which uses the utility code from dnd.js.
Sorry for my English, I am a new to jquery mobile and only have basic knowledge about javascript languages in general; I was playing around with a single page website mobile ( I usually use Dreamweaver CS6) and I reached a good result with photoswipe and everything was good since I had just few images. I have added a lot of them so now I would get the images' link dynamically.
In short, I want to start from a folder on my ftp and read all images file within it and create the <li> items for each one. Can I make this job with jquery mobile or should I use a language like php or .Net
I have read some examples around here and on google but they didn't help me a lot, like this one, I am sure it could be an answer for me in it but I don't know how to start
http://docs.phonegap.com/en/2.4.0/cordova_file_file.md.html#DirectoryReader
Here some code I'm using:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!-- Librerie PhotoSwipe -->
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/photoswipe.css">
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/styles.css">
<script type="text/javascript" src="../PhotoSwipe/klass.min.js"></script>
<script type="text/javascript" src="../PhotoSwipe/code.photoswipe-3.0.5.min.js"></script>
<!-- End PhotoSwipe -->
<script type="text/javascript">
$(document).ready(function(){ var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false, captionAndToolbarAutoHideDelay: 0 }); });
</script>
Then my page
<div data-role="page" id="page">
<div data-role="header">
<h1>Title of my Page</h1>
</div>
<div data-role="content">
<ul id="Gallery" class="gallery">
<li>
<a href="../Images/img04.jpg">
<img src="../Images/img04.jpg" alt=""></a>
</li>
</ul>
</div>
When i land on this page everything works fine. Shall I use something like this?
That I took from this website, can I use JSON to accede to my ftp folder and than cycle the content?
Should I put this in a function? If yes who is going to call it?
$("#Photos").live("pagebeforeshow", function(){
$("ul#PhotoList").children().remove('li');
var tag = MyTag
$.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&client_id=####",
function(data){
$.each(data.data, function(i,item){
$("ul#PhotoList").append('<li><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /></li>');
});
});
var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
});
Any help is appriciated, thank you in advance, I am sure my issue here is my limited knowledge.
You should use pageinit and pagebeforeshow Instead of $(document).ready. Also .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). http://api.jquery.com/live/
Append list Items:
$("#PhotoList").append('<li><a href="..
When you finish refresh the list to display your new list:
$('#PhotoList').listview('refresh');
Update:
I use php programs on my server in order to retrieve json strings. Something like this...
xhr = new XMLHttpRequest();
xhr.open("GET","http://192.168.100.2/sr/quotelisttest?name="+s,true);
xhr.send("");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4){
alert(xhr.readyState);
alert(xhr.responseText);
var v = JSON.parse(xhr.responseText);
SO I know this solution is somewhere but I can't find it. I've been digging for about a day into google and stackOverflow.
Basically, I have an iframe and I'm trying to get it to expand to the size of its contents, a pretty simple task. I went through several methods, looking at different heights etc. But for some gosh darn reason, Chrome does not want to put up with me.
So here is the javascript to resize the IFrame. To make sure JS was working and to read the height I threw in that innerHTML piece (sort of like debugging)
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.body.offsetHeight;
}
</script>
Here's the iframe:
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0 height="100%" width="100%">
Not working!</iframe>
So for some odd reason, it does not want to work, pretty much hates me in Chrome. But it works in Firefox and IE. Any solutions??
Unless I'm missing something, I believe you have a typo on the last line of your function (missing .document.)
The following works for me in Chrome (18.0):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resizeFrame() {
var t=document.getElementById("Footer");
var f = document.getElementById("mainContent");
var y = f.contentWindow;
t.innerHTML = y.document.body.offsetHeight;
f.height = y.document.body.offsetHeight;
}
</script>
</head>
<body>
<iframe onload="resizeFrame()" id="mainContent" src="homec.html" scrolling=auto frameborder=0
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>
</body>
</html>