I am trying to get youtube videos to be automatically embedded into a webpage.
The webpage has keywords already passed in from the url: /view.php?id=keywords123
These are used for creating content on a template and I need it to also display a relevant video from youtube.
Is there code that will search youtube and return the embed code or the video id to be embedded?
Cheers in advance!
Check this link from IBM. It is a very old link but I wanted to do something similar earlier and helped me a lot. It has some examples about how you will perform a keyword search and parse the xml response.
Check out Youtube Player API
Youtube Player Demo:
http://code.google.com/apis/youtube/youtube_player_demo.html
Youtube Actionscript player api:
http://code.google.com/apis/youtube/flash_api_reference.html
Youtube Javascript player api:
http://code.google.com/apis/youtube/js_api_reference.html
I use jquery to get the youtube embed url:
var re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w]*(?:['"][^<>]*>|<\/a>))[?=&+%\w-]*/ig;
video_url= text.replace(re,'http://www.youtube.com/embed/$1');
html='<p><iframe width="100%" height="300" src="'+video_url+'" frameborder="0"></iframe></p>';
$("#video_place").append(html);
I would suggest you to use json api, following is the code,cheers.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
alert("");
$("#sc").attr("src","http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos2");
});
});
function loadVideo(playerUrl, autoplay) {
swfobject.embedSWF(
playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
(autoplay?1:0), 'player', '500', '400', '9.0.0', false,
false, {allowfullscreen: 'true'});
}
function showMyVideos(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul>'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t;
html.push('<li>', title, '</li>');
}
html.push('</ul>');
document.getElementById('videos').innerHTML = html.join('');
}
</script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0"
type="text/javascript"></script>
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css"/>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js"
type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videobar/gsvideobar.css"
rel="stylesheet" type="text/css"/>
<style>
pre {
background-color:#FAFAFA;
border:1px solid #BBBBBB;
font-size:9pt;
line-height:125%;
margin:1em 0pt 0pt;
overflow:auto;
padding:0.99em;
}
code, pre {
color:#007000;
font-family:monospace;
}
.titlec {
font-size: small;
}
ul.videos li {
float: left;
width: 10em;
margin-bottom: 1em;
cursor:pointer;
}
ul.videos
{
margin-bottom: 1em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
#videoBar {
width : 160px;
margin-right: 5px;
margin-left: 5px;
padding-top : 4px;
padding-right : 4px;
padding-left : 4px;
padding-bottom : 0px;
}
</style>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 400px; float: left; position:relative">
<object id="player"></object>
</div>
<br>
<div id="videos2" style="width:500px; clear:both;height:300px; overflow:auto;"></div>
<script id="sc"
type="text/javascript"
src="http://gdata.youtube.com/feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos">
</script>
Related
I want to add id to cloned img tag as I want to store the data of cloned object to database. can anyone help please..I also want to store the x and y positions provide by the user using javascript..I just want to know how to assign different id's to the cloned img tag.
Here is my code.
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="dragndrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="include/jquery-ui.css">
<script src="include/jquery-1.10.2.js"></script>
<script src="include/jquery-ui.js"></script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:200px;
height:500px;
border:1px solid black;
}
.drag{
width:100px;
border:1px solid black;
height:40px;
position:relative;
background-color:red;
background-image:url(restaurant/8793_532242100147879_270911928_n.jpg);
}
#droppable{
width:500px;
height :500px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div class = "col" id="col1">
<img src="" id="drag1" class="drag">
</div>
<div class="col" id ="droppable">
</div>
</div>
</body>
</html>
here is dragndrop.js file.
// JavaScript Document
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
$("#droppable").droppable({
drop: function(e, ui) {
x = ui.helper.clone();
x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.appendTo('#droppable');
ui.helper.remove();
}
});
});
I tested this script in normal .php file but when put code in wordpress header file script doesn't worked.
Can someone show me how to put CarouFredSel slider inside wordpress theme?
Here is the code i used in .php file and all works just fine:
<!-- include jQuery + carouFredSel plugin -->
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
<!-- optionally include helper plugins -->
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
<!-- fire plugin onDocumentReady -->
<script type="text/javascript" language="javascript">
$(function() {
// Basic carousel, no options
$('#foo0').carouFredSel();
// Basic carousel + timer, using CSS-transitions
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
}, {
transition: true
});
// Scrolled by user interaction
$('#foo2').carouFredSel({
auto: false,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
// Variable number of visible items with variable sizes
$('#foo3').carouFredSel({
width: 360,
height: 'auto',
prev: '#prev3',
next: '#next3',
auto: false
});
// Responsive layout, resizing the items
$('#foo4').carouFredSel({
responsive: true,
width: '100%',
scroll: 2,
items: {
width: 400,
// height: '30%', // optionally resize item-height
visible: {
min: 2,
max: 6
}
}
});
// Fuild layout, centering the items
$('#foo5').carouFredSel({
width: '100%',
scroll: 2
});
});
</script>
<style type="text/css" media="all">
.list_carousel {
background-color: #ccc;
margin: 0 0 30px 60px;
width: 900px;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #999;
text-align: center;
background-color: #eee;
border: 5px solid #999;
width: 400px;
height: 400px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix {
float: none;
clear: both;
}
</style>
<p>Basic carousel.</p>
<div class="list_carousel">
<ul id="foo1">
<?php
$html = "";
$url = "http://rss.dnevnik.hr/index.rss";
$xml = simplexml_load_file($url);
for ($i = 0; $i <10; $i++) {
$title = $xml->channel->item[$i]->title;
$link = $xml->channel->item[$i]->link;
$opis = $xml->channel->item[$i]->description;
$html .= "<li><div><a href='$link'><h3>$opis<h3></a></div></li>";}
echo $html;
?>
</ul>
<div class="clearfix"></div>
</div>
<br />
I have a table with userdata using:
jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
and Christian Bach jquery.tablesorter-update
"jquery.tablesorter-update.js"
When using the demo version of "Modal form", Create new user on the same page as the table (form opens ontop of table),
it looks and works great in Chrome and Safari but the from is distorted in IE8.
Snippet from head:
<!-- CSS for table -->
<style type="text/css">
div#tableBody {
width: 100%;
padding: 0.3em;
font-size:x-small;
}
table {
width: 100%;
}
table th {
padding: 0.3em;
}
table th span {
float:right;
}
table tr.odd {
background-color: #FFFFFF;
}
div.ui-datepicker {
font-size:small;
}
</style>
<!-- jQuery UI Theme Start-->
<link href="../css/redmond/jquery-ui-1.10.1.custom.css" rel="stylesheet">
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-ui-1.10.1.custom.js"></script>
<script src="../js/jquery.ui.datepicker-sv.js"></script>
<!-- jQuery UI Theme End-->
<!--Christian Bach jquery.tablesorter-update Star-->
<script type="text/javascript" src="../scripts/jquery.tablesorter-update.js"></script>
<!--Christian Bach jquery.tablesorter-update End-->
<script language="JavaScript">
<!--
function DeleteItem(idurl)
{
go_on = confirm("Are you sure?");
if (go_on)
{
document.location.href=idurl;
}
}
// Tablesort
$(document).ready(function() {
// call the tablesorter plugin
$('#itemTable').tablesorter({
// sort on the first column and third column, order asc
locale: 'eu', widgets: ['zebra'], useUI: true
});
});
//-->
</script>
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function() {
var name = $( "#name" ),
email = $( "#email" ),
============= complete ripoff from jquery-ui modal form demo
Any suggestions?
I strongly suspect the issue is more the HTML and CSS than anything jQuery is doing because 1.9 is the last version to care about older versions of IE.
That said, I would advise - not just to solve this problem but any future problems with IE bugs - for you to look into a reset.css (okay, before I get stoned to death, it's a better idea to go with normalise.css these days, which you can find here: normalise.css
Admittedly that doesn't specifically tackle your problem, but I'd stick that in there because that will most likely fix your problem and any other potential IE issues.
That said, I'm not sure why you need to specifically set all those widths as a table will take up whatever room it can to fulfill it's 'needs' for width anyway.
I have a main php file that loads an external php file. This is the code in my main php file:
<php>
<head>
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="ajax.js"></script>
<link rel="stylesheet" href="colorbox.css" />
<script src="js/jquery.colorbox.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
});
</script>
</head>
<div id="tengah" class="jimgMenu" >
<ul>
<li class="landscapes"> </li>
<li class="people"> </li>
<li class="nature"> </li>
</ul>
</div>
<div id="content" class="clearfix shadow">
<div id="sidebar" class="left">
<div id='ResponseDiv'> </div>
<div id="menu" class="inner">
</div>
</div>
<div id="main" class="right">
<h2>Detail</h2>
<div id='ResponseDiv2'> </div>
</div>
</div>
</div>
</php>
I have a function in ajax.js that calls an external php page named ajaxpage. Here the code in ajax.js:
function ajaxpage(url, containerid) {
var page_request = false
if(window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if(window.ActiveXObject) { // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch(e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch(e) {}
}
} else return false
page_request.onreadystatechange = function () {
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid) {
if(page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)) document.getElementById(containerid).innerHTML = page_request.responseText
}
The problem is when I try to load "7.php" into my main.php the 7.php file is loaded but the animation in 7.php not working.
Does anyone know why this is happening?
this is the content of 7.php
<php>
<html>
<head>
<style type="text/css">
body {
background: #0F0D0D;
padding: 30px 0 0 50px;
}
div.sc_menu_wrapper {
position: relative;
height: 500px;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 160px;
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 130px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* When image support is turned off */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading {
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
/* Make background a bit transparent for browsers that support rgba */
background: rgba(0, 0, 0, 0.5);
}
/* Here are styles for a link to an article. Not for you :) */
#back {
margin-left: 8px;
color: gray;
font-size: 18px;
text-decoration: none;
}
#back:hover {
text-decoration: underline;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">/*<![CDATA[*/
function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);
// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
// Counts number of images that are succesfully loaded
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){
loading.hide();
// Remove scrollbars
wrapper.css({overflow: 'hidden'});
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 99;
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Using outer height to include padding too
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();
// Create a invisible tooltip
var tooltip = $('<div class="sc_menu_tooltip"></div>')
.css('opacity', 0)
.appendTo(wrapper);
// Save menu titles
scrollable.find('a').each(function(){
$(this).data('tooltipText', this.title);
});
// Remove default tooltip
scrollable.find('a').removeAttr('title');
// Remove default tooltip in IE
scrollable.find('img').removeAttr('alt');
var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;
var wrapperOffset = wrapper.offset();
var tooltipLeft = e.pageX - wrapperOffset.left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
// Move tooltip under the mouse when we are in the higher part of the menu
if (e.pageY - wrapperOffset.top < wrapperHeight/2){
tooltipTop += 80;
}
tooltip.css({top: tooltipTop, left: tooltipLeft});
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
// Setting interval helps solving perfomance problems in IE
var interval = setInterval(function(){
if (!lastTarget) return;
var currentText = tooltip.text();
if (lastTarget.nodeName == 'IMG'){
// We've attached data to a link, not image
var newText = $(lastTarget).parent().data('tooltipText');
// Show tooltip with the new text
if (currentText != newText) {
tooltip
.stop(true)
.css('opacity', 0)
.text(newText)
.animate({opacity: 1}, 1000);
}
}
}, 200);
// Hide tooltip when leaving menu
wrapper.mouseleave(function(){
lastTarget = false;
tooltip.stop(true).css('opacity', 0).text('');
});
/*
//Usage of hover event resulted in performance problems
scrollable.find('a').hover(function(){
tooltip
.stop()
.css('opacity', 0)
.text($(this).data('tooltipText'))
.animate({opacity: 1}, 1000);
}, function(){
tooltip
.stop()
.animate({opacity: 0}, 300);
});
*/
}
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
</script>
</head>
<body>
<div style="overflow: hidden;" class="sc_menu_wrapper">
<div style="display: block;" class="sc_menu">
</div>
<div style="display: none;" class="loading">Loading...</div><div style="opacity: 0;" class="sc_menu_tooltip"></div></div>
</body></html>
</php>
See Hotel
This code will work...
I want to upload video to server and then display it on web page using some player (like youtube) using PHP.
My client ask: "Videos must be no longer than 2 minutes and in either Quicktime, WMV, Mp4 or FLV format."
Is there any opensource script which help me to upload a video with client requirements and then an opensource player which plays that video?
Please help!
Thanks
This is my favourite solution:
http://flowplayer.org/
It enables to control the video quite a lot: it uses javascript settings and embedded flash video player.
Edit: if you look for good uploader, try
http://code.google.com/p/swfupload/
It can do multiple uploads, and filetype checks.
You must, first of all, create links to the videos you want to play (I created mine on a separate page[index.html]). Then upon the click of a link, it will open the page (play.php). I assumed that index.html was displaying the links to the videos from the database, then the rest of the scripting for playing is handled by play.php.
see codes below:
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
tr:nth-child(odd) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<table width="53%" border="1">
<tr>
<td width="8%">S/NO</td>
<td width="92%">NAME OF VIDEO FILE</td>
</tr>
<tr>
<td align="center">1</td>
<td>Funny Nigeria Video Animation</td>
</tr>
<tr>
<td align="center">2</td>
<td><a href="play.php?url=WildGeese.mp4&pic=wg.png">Joan Armatrading-
Flight of the Wild Geese - MP4</a></td>
</tr>
</table>
</center>
</body>
</html>
play.php
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Fluid Width Video</title>
<style>
* { margin: 0; padding: 0; }
body {
font: 16px/1.4 Georgia, Serif;
width: 50%;
margin: 80px auto;
background: url(images/bglines.png);
}
h1 { font-weight: normal; font-size: 42px; }
h1, p, pre, video, h2, figure, h3, ol { margin: 0 0 15px 0; }
h2 { margin-top: 80px; }
h1 { margin-bottom: 40px; }
li { margin: 0 0 5px 20px; }
article { background: white; padding: 10%; }
pre { display: block; padding: 10px; background: #eee; overflow-x: auto; font: 12px Monaco, MonoSpace; }
img { max-width: 100%; }
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
video {
width: 100% !important;
height: auto !important;
}
figure { display: block; background: #eee; padding: 10px; }
figcaption { display: block; text-align: center; margin: 10px 0; font-style: italic; font-size: 14px; orphans: 2; }
</style>
</head>
<body>
<?
if(isset($_GET['url'])){
$vid = "movies/".$_GET['url'];
$pos = "movies/".$_GET['pic'];
if($pos == "movies/ng.png"){
$cap = "Animation - Funny Play Station 3 Nigerin video clip";
}
if($pos == "movies/wg.png"){
$cap = "Jordan Armsterdam - The flight of the Wild Geese";
}
?>
<figure>
<video src="<?php echo $vid;?>" controls poster="<?php echo $pos;?>"></video>
<figcaption><?php echo $cap; ?></figcaption>
</figure>
<?php }else{ echo "You must be a paid Student in order to watch video tutorial!"; }?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var $allVideos = $(".js-resize"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
</script>
</body>
</html>