• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 431
  • Last Modified:

Adding YouTube video and embed code to web page

I'm having trouble finding a solution to my problem and could really use some assistance. I would like to embed a YouTube video on my webpage, then below it add the embed code so others can easily copy and paste it to their site. I'm using tinymce, and adding the code using the HTML editor.

I've tried surrounding the iframe embed code with <code></code> and <pre><code></code></pre>, but it's not working. It just displays the actual video.

Any help, suggestions or other options would be greatly appreciated.

Thanks!
0
jej07
Asked:
jej07
  • 9
  • 8
  • 2
2 Solutions
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
try enclosing the code in <xmp> </xmp>
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
you could also put the code in a <textarea> text box and style it accordingly
0
 
sniper7Commented:
Try to put the embeded code in <textarea> tags like so:


 <textarea>

<iframe width="420" height="315" src="//www.youtube.com/embed/mkRZBQZiUps" frameborder="0" allowfullscreen></iframe>

</textarea>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
how is that different from what I suggested?
0
 
jej07Author Commented:
I tried both <xmp></xmp> and <textarea></textarea>, but tinymce appears to have stripped both from the html.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
are you entering in the data through tinyMCE? if so, i believe there's a HTML button you can use to directly edit the html that'll be saved
0
 
sniper7Commented:
By default TinyMCE will filter out iframe tag for security reasons. You can add this tag and its attributes to the allowed list of html elements.

See http://tinymce.moxiecode.com/wiki.php/Configuration:valid_elements

add the following to the end of the list

,iframe[src|title|width|height|allowfullscreen|frameborder]
0
 
jej07Author Commented:
The valid elements I have listed currently for tinymce are listed below. Does tinymce have a button, similar to the "Code" button found on EE's editor? I works in a similar manner to what I'm trying to do.

@The_Big_Daddy, you are correct. Tinymce does have the the button to allow HTML input. However, it seems to be stripping the textarea and xmp tags. It will leave the code and pre tags, but neither seem to work.

extended_valid_elements : "a[class|name|href|target|rel|title|onclick],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],script[defer|language|src|type],object[classid|codebase|width|height],param[name|value],embed[type|src|width|height|pluginspage|swliveconnect|seamlesstabbing|base|name|flashvars|bgcolor|allowfullscreen],iframe[frameborder|marginwidth|marginheight|border|src|width|height|scrolling|title|allowfullscreen]"

Open in new window

0
 
jej07Author Commented:
This is the complete code for my tinymce.

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    width: "550",
    height: "400",    
    content_css : "style/contentcss.css<?= $cms_no_cache ?>",    
    
    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,forecolor,|,styleselect,formatselect,|,bullist,numlist,|,sub,sup,charmap,|,outdent,indent,blockquote,|,undo,redo,|,spellchecker,code",
    theme_advanced_buttons2 : "pastetext,pasteword,removeformat,cleanup,|,search,replace,|,tablecontrols,|,hr,visualaid,visualblocks",
    theme_advanced_buttons3 : "image,|,media,|,link,unlink,anchor",
    theme_advanced_buttons4 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : false,
		
    plugins: "table,advlink,media,paste,spellchecker,searchreplace", 
    relative_urls : false,
    external_link_list_url : "scripts/links.js<?= $cms_no_cache ?>",
    external_image_list_url : "scripts/images.js<?= $cms_no_cache ?>",

	extended_valid_elements : "a[class|name|href|target|rel|title|onclick],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],script[defer|language|src|type],object[classid|codebase|width|height],param[name|value],embed[type|src|width|height|pluginspage|swliveconnect|seamlesstabbing|base|name|flashvars|bgcolor|allowfullscreen],iframe[frameborder|marginwidth|marginheight|border|src|width|height|scrolling|title|allowfullscreen]"

		
});

Open in new window

0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
are you trying to display the html code through tinyMCE or are you inputting the HTML code through tinyMCE to be saved and then displayed later?
0
 
jej07Author Commented:
I'm trying to display the code below the embedded video. That way visitors could easily copy and paste the code if they like the video.

It seems like what you suggested should work. I'm assuming the problem lies with my editor.

I'm open to different solutions though if you have any. Just trying to keep it simple as this will be done on several pages.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
did you try JUST a <textarea>? and not one thats been converted to a tinyMCE editor?
0
 
jej07Author Commented:
Yes. I added <textarea> using the source code HTML button. It also gets stripped.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
thats not what I'm talking about. Forget about tinyMCE for a minute and on your html page, do the following"

<textarea>
     <iframe src="www.abc.com" rest of embed code
</textarea>
0
 
jej07Author Commented:
Sorry. It's actually a dynamic php page. Content on the page is created in a CMS and has to go through the editor.

But, to answer your question, when adding your code directly to the php template, it works. It's just not a practical option. I suppose it is good for troubleshooting though.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
so you ARE saving the embed code through the editor....

have you tried the youtube plugin?

http://xoops.org/modules/news/article.php?storyid=6483
0
 
jej07Author Commented:
No, I'm not familiar with that plugin. It looks like it would come in handy, but appears to only help with embedding the video.

Will it also allow me to add the embed code in a format that can be copied/pasted/shared by visitors?

you could also put the code in a <textarea> text box and style it accordingly

Your original suggestion should have worked, but I don't understand why the <textarea> tags are being removed by the editor.
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
because you don't have it listed under extended_valid_elements. Try adding it there and see if it works
0
 
jej07Author Commented:
That worked. Thank you very much for your help.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 9
  • 8
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now