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.


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.