Προς το περιεχόμενο

Youtube video σε popup παράθυρο

isay

Από τον isay
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

isay Crazy Insomniac

isay

Δημοσ.
Δημοσ.

Πριν μερικους μήνες το youtube απενεργοποίησε το ενσωματομένο popup, πράγμα που με «ξεβόλεψε» γιατί έχω τη συνήθεια, ενώ κάνω κάτι, να παρακολουθώ παράλληλα κάποιο βιντεο σε μικρό παράθυρο. Έφτιαξα λοιπόν μια απλή σελίδα html/javascript που κάνει το ίδιο πράγμα και σκέφτηκα να το μοιραστώ μαζί σας.

 

Φορτώνουμε τη σελίδα, του δίνουμε το url από το ζητούμενο βίντεο και ανοίγει ένα pop up παράθυρο του οποίου μπορούμε να αλλάξουμε τις διαστάσεις. Το «κόλπο» μπορεί να συνδυαστεί με κάποιο πρόγραμμα τύπου deskpins ώστε να μένει πάντα στο προσκήνιο (σε πρώτο πλάνο)

 

Παρακάτω η σελίδα ως attachment καθώς και ο κώδικας.

 

Η σελίδα ως attachment

popupplayer.htm

 

Ο κώδικας

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">

<script type='text/javascript'>

function clearyidsp() {
  var variabl=document.getElementById("fieldSearchysp").value;
  var paketo = variabl.split("v=");
  var sxedon = paketo[1].split("&");
  var katharoid = sxedon[0];
  document.getElementById("fieldSearchysp").value = katharoid;
}

 function submitNwFormysp(theForm) {
    windowURL = "http://www.youtube.com/embed/" + theForm.fieldSearchysp.value + "?html5=1&rel=0&autoplay=0";
    myWindow = window.open(windowURL,'1122','width=640,height=500,directories=no,location=no,menubar=no,scrollbars=yes, status=no,toolbar=no,resizable=no,left=450,top=200');
    myWindow.focus();
  } 
  

</script>

<title>Youtube Popup</title>

<style type="text/css">
<!--
body {
	margin-left: 10px;
	margin-top: 10px;
	background-color: #666699;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
}

-->
</style>
</head>
<body>

<h2>Youtube Popup Video Player with speed controller</h2>
Οδηγίες: <br />Κάντε επικόλληση το ΠΛΗΡΕΣ URL του youtube video και πατήστε το πλήκτρο Pop it Up!
<br /><br />
Π.χ. δοκιμάστε το URL<br /> 
<input type="text" name="test1" size="50" id="test1" value="http://www.youtube.com/watch?v=yZaitIyXul4">

<br /><br />
<form name="newwnysp">
<input type="text" name="fieldSearchysp" size="100" id="fieldSearchysp" onBlur="clearyidsp()" >
<input type="button" name="clickSubmitsp" onClick="submitNwFormysp(document.newwnysp)" value="Pop it up!">
</form>

</body>
</html>
  • Like 9
migf1 Mentor

migf1

Δημοσ.
Δημοσ.

+1 κι από μένα.

 

Ίσως όμως είναι καλή ιδέα τα width και height να τα περνάς ως ορίσματα στην συνάρτηση αντί να τα έχεις fixed σε 640x500, με τους κατάλληλους ελέγχους (και να κάνουν fallback σε 640x500 σε περίπτωση λάθους) καθώς και να κάνεις centered δυναμικά το popup στην οθόνη (τα top και left).

isay Crazy Insomniac

isay

Δημοσ.
  • Μέλος
Δημοσ.

Σας ευχαριστώ για τα +

 

 

Ίσως όμως είναι καλή ιδέα τα width και height να τα περνάς ως ορίσματα στην συνάρτηση αντί να τα έχεις fixed σε 640x500, με τους κατάλληλους ελέγχους (και να κάνουν fallback σε 640x500 σε περίπτωση λάθους) καθώς και να κάνεις centered δυναμικά το popup στην οθόνη (τα top και left).

 

Σίγουρα σηκώνει μπόλικη παραμετροποίηση αλλά η φιλοσοφία κατασκευής ήταν ένας γρήγορος τρόπος για popup, με ελάχιστες ανάγκες πρότερων επιλογών και παραμετροποίησης. Άλλωστε όταν βρω χρόνο θα το φτιάξω greasemonkey script που θα εμφανίζει κουμπί ΜΕΣΑ στην ιστοσελίδα του youtube video και έτσι θα αποφευγω τα νεα σελίδα και τα copy paste.

 

Το center το θεωρώ αδόκιμο γιατί έτσι κι αλλιώς το νεο παράθυρο το τοποθετώ κάτω δεξιά ή κάτω αριστερά για να μη μου κρύβει το οπτικό πεδίο. Από την παρατήρηση σου σκέφτηκα οτι το 640*500 είναι μεγάλο γιατί έτσι κι αλλιώς πάντα καταλήγει κάπου 200*200. Απλώς με το να γίνεται πανεύκολα η αλλαγή διαστάσεων με το ποντίκι, δεν «ενοχλήθηκα» απο το 640*500 (το οποίο δεν στο κρύβω οτι ήταν τυχαία επιλογή και απλά «έμεινε» )
 

  • 2 μήνες μετά...
isay Crazy Insomniac

isay

Δημοσ.
  • Μέλος
Δημοσ.

Έκανα ένα μικρό update.

Η νεότερη έκδοση μπορεί να κάνει popup και αναπαραγωγή ολόκληρης playlist. Το παράθυρο ειναι resizable.

 

Επισυνάπτω το αρχείο και παραθέτω  κώδικα

popupplayer.htm

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type='text/javascript'>

function clearyidsp() {
  var variabl=document.getElementById("fieldSearchysp").value;
  var paketo = variabl.split("v=");
  var sxedon = paketo[1].split("&");
  var katharoid = sxedon[0];
  document.getElementById("fieldSearchysp").value = katharoid;
}

 function submitNwFormysp(theForm) {
    windowURL = "http://www.youtube.com/embed/" + theForm.fieldSearchysp.value + "?html5=1&iv_load_policy=3&modestbranding=1&autoplay=0";
    myWindow = window.open(windowURL,'1122','width=320,height=250,directories=no,location=no,menubar=no,scrollbars=yes, status=no,toolbar=no,resizable=no,left=450,top=200');
    myWindow.focus();
  } 
  

function clearyidspls() {
  var variabl=document.getElementById("fieldSearchyspls").value;
  var paketo = variabl.split("list=");
  var sxedon = paketo[1].split("&");
  var katharoid = sxedon[0];
  document.getElementById("fieldSearchyspls").value = katharoid;
}

 function submitNwFormyspls(theForm) {
    windowURL = "http://www.youtube.com/embed?listType=playlist&list=" + theForm.fieldSearchyspls.value + "&html5=1&iv_load_policy=3&modestbranding=1&autoplay=0";
    myWindow = window.open(windowURL,'1123','width=320,height=250,directories=no,location=no,menubar=no,scrollbars=yes, status=no,toolbar=no,resizable=no,left=450,top=200');
    myWindow.focus();
  } 
  
  
</script>

<title>Youtube Popup</title>

<style type="text/css">
<!--
body {
	margin-left: 10px;
	margin-top: 10px;
	background-color: #666699;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
}

-->
</style>
</head>
<body>

<h2>Youtube Popup Video Player with speed controller</h2>
Οδηγίες για μεμονωμένο βίντεο: <br />Κάνε επικόλληση στο πεδίο Α το πλήρες URL (π.χ. http://www.youtube.com/watch?v=OuNVbF3RHPs ) και πάτα το πλήκτρο Pop it Up!
<br /><br />
<form name="newwnysp">
Α.<input type="text" name="fieldSearchysp" size="100" id="fieldSearchysp" onBlur="clearyidsp()" >
<input type="button" name="clickSubmitsp" onClick="submitNwFormysp(document.newwnysp)" value="Pop it up!">
</form>

<br /><br />

Οδηγίες για playlist με βίντεο: <br />Κάνε επικόλληση στο πεδίο Β το πλήρες URL που εμπεριέχει το list ID (π.χ. https://www.youtube.com/watch?v=kuRbI4uhapo&<font color="yellow">list=</font>PL0BF9B0C8E3552275 ) και πάτα το πλήκτρο Pop Up the list!
<br /><br />
<form name="newwnyspls">
B.<input type="text" name="fieldSearchyspls" size="100" id="fieldSearchyspls" onBlur="clearyidspls()" >
<input type="button" name="clickSubmitspls" onClick="submitNwFormyspls(document.newwnyspls)" value="Pop up the list!">
</form>

</body>
</html>

 

 

 

 

 

 

Μπράβο στα παιδιά της εθνικής που θα μας ταξιδέψουν Βραζιλία!

 

 

  • Like 1

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...