[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Adding YouTube video and embed code to web page

Posted on 2013-10-24
19
Medium Priority
?
427 Views
Last Modified: 2013-10-24
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
Comment
Question by:jej07
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 8
  • 2
19 Comments
 
LVL 33

Expert Comment

by:Big Monty
ID: 39597874
try enclosing the code in <xmp> </xmp>
0
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 2000 total points
ID: 39597879
you could also put the code in a <textarea> text box and style it accordingly
0
 

Expert Comment

by:sniper7
ID: 39597885
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
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.

 
LVL 33

Expert Comment

by:Big Monty
ID: 39597895
how is that different from what I suggested?
0
 
LVL 1

Author Comment

by:jej07
ID: 39597926
I tried both <xmp></xmp> and <textarea></textarea>, but tinymce appears to have stripped both from the html.
0
 
LVL 33

Expert Comment

by:Big Monty
ID: 39597930
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
 

Expert Comment

by:sniper7
ID: 39597953
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
 
LVL 1

Author Comment

by:jej07
ID: 39598010
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
 
LVL 1

Author Comment

by:jej07
ID: 39598022
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
 
LVL 33

Expert Comment

by:Big Monty
ID: 39598023
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
 
LVL 1

Author Comment

by:jej07
ID: 39598063
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
 
LVL 33

Expert Comment

by:Big Monty
ID: 39598069
did you try JUST a <textarea>? and not one thats been converted to a tinyMCE editor?
0
 
LVL 1

Author Comment

by:jej07
ID: 39598125
Yes. I added <textarea> using the source code HTML button. It also gets stripped.
0
 
LVL 33

Expert Comment

by:Big Monty
ID: 39598146
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
 
LVL 1

Author Comment

by:jej07
ID: 39598181
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
 
LVL 33

Expert Comment

by:Big Monty
ID: 39598241
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
 
LVL 1

Author Comment

by:jej07
ID: 39598482
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
 
LVL 33

Accepted Solution

by:
Big Monty earned 2000 total points
ID: 39598497
because you don't have it listed under extended_valid_elements. Try adding it there and see if it works
0
 
LVL 1

Author Closing Comment

by:jej07
ID: 39598586
That worked. Thank you very much for your help.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question