Advanced Search

Dynamically Load Youtube Video Iframe embed Code inside a DIV

/ Published in: jQuery
Save to your folder(s)
By storing or by having the Iframe embed code as a variable, You can play the Youtube video on a click of a button or any other event. I have used “append” function of jQuery to append the IFrame code dynamically inside a DIV tag.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Dynamically Load Youtube Video Iframe embed code inside a DIV</title>
  6. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7. </head>
  8. <style>
  9. 	body
  10. 	{
  11. 		margin	: 0;
  12. 		padding	: 0;
  13. 		background	: #EEE;
  14. 		color		: #333;
  15. 		font-family: 'Open Sans', sans-serif;
  16. 		font-size	: 12px;
  17.  
  18. 	}
  19. 	#wrapper
  20. 	{
  21. 		width	: 1012px;
  22. 		margin	: 0 auto;
  23.  
  24. 	}
  25.  
  26. 	.the-player
  27. 	{
  28. 		width	: 560px;
  29. 		height	: 315px;
  30. 		border	: 1px solid #333;
  31. 	}
  32.  
  33. 	.embed-code
  34. 	{
  35. 		width	: 301px;
  36. 		height	: 85px;
  37. 	}
  38.  
  39.  
  40. 	.btn-load-video
  41. 	{
  42. 		border: 1px solid #AAA;
  43. 		padding: 3px 5px;
  44. 		text-decoration: none;
  45. 		background: #333;
  46. 		color: #FFF;
  47. 	}
  48.  
  49. </style>
  50. <body>
  51. 	<div id="wrapper">
  52.  
  53. 		<h1>Dynamically Load Youtube Video Iframe embed code inside a DIV</h1>
  54.  
  55. 		<textarea class="embed-code"><iframe width="560" height="315" src="http://www.youtube.com/embed/XSGBVzeBUbk?autoplay=1" frameborder="0" allowfullscreen></iframe></textarea> 
  56.  
  57. 		<p>You can also paste any Iframe Youtube Video Code above.</p>
  58.  
  59. 		<p><a href="#" class="btn-load-video">Load the video</a></p>
  60.  
  61. 		<div class="the-player">
  62.  
  63. 		</div>
  64.  
  65. 		<p>Demo by : <a href="http://blog.pixelthemes.com/">WordPress Themes</a> </br>
  66. 		Article Link : <a href="http://blog.pixelthemes.com/ideas/dynamically-load-youtube-video-iframe-embed-code-inside-a-div">Article on Dynamically Load Youtube Video Iframe embed code inside a DIV</a>
  67. 	</div>
  68.  
  69. 	<script type="text/javascript">
  70. 	$(document).ready(function() {
  71. 		$('.btn-load-video').click(function() {
  72. 			 event.preventDefault(); 
  73. 			 $('.the-player').append($("textarea.embed-code").val());
  74.  
  75. 			});
  76. 		});
  77. 	</script>
  78. </body>
  79. </html>

URL: http://blog.pixelthemes.com/ideas/dynamically-load-youtube-video-iframe-embed-code-inside-a-div

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.