Announcement

Collapse
No announcement yet.

How do I embed a YOUTUBE video into my product description?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How do I embed a YOUTUBE video into my product description?

    I tried to utilized the Video URL box found under the product image but it's not working. I'd actually prefer to have the video thumbnail to appear below my product description. Please see the attached screenshot. Can someone help me figure out how to do this?

  • #2
    Just cut and paste the youtube embed code (from the youtube site) into your description HTML on the product listing in the admin panel.

    Comment


    • #3
      Originally posted by NMTEACO View Post
      Just cut and paste the youtube embed code (from the youtube site) into your description HTML on the product listing in the admin panel.
      Thanks for your help! So I must have misunderstood because I tried this and it doesn't work. So basically, I would need to go to the particular product listing, then go to the "description" box and select WSIWIG MODE On/Off", then just paste my code there? That is what I did but the only thing that appears is the actual url string to my YouTube video. Yikes.

      Comment


      • #4
        I figured it out but the thing I DON'T don't like is that once the video ends, I don't want the video/content ads from other YouTube competitors to appear. Does anyone know a way to embed a video other than using YouTube so this won't happen?

        Comment


        • #5
          You don't want to use the wsiwig interface, just edit the html directly. The embed code you get from YouTube is JavaScript, and you don't want the wsiwig editor messing with it.

          Comment


          • #6
            You need some CSS to make the Video responsive. Also to not get related videos add ?rel=0 to the end of the video.
            Make sure to follow NMTEACO instructions about the WYSIWYG editor.

            Replace the XXXXX with the Video code
            Code:
             
            <div class="youtube-video-container" style="text-align:center;">
                <iframe src="//www.youtube.com/embed/XXXXXXXXXXXXX?rel=0" width="640" height="360" frameborder="0" allowfullscreen="">
                </iframe>
            </div>
            CSS:
            Code:
            .youtube-video-container {                
                width:80%;            
                    max-width:640px;                
                position:relative;            
                padding-bottom:56.25%;            
                padding-top:10px;            
                height:0;            
                overflow:hidden;            
                    margin-left: auto;                
                    margin-right: auto;                
            }                
            .youtube-video-container iframe, .youtube-video-container object, .youtube-video-container embed {    
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
            }

            Comment


            • #7
              elightbox .. thank you for that. Can you provide instructions that are a little bit more specific please? Like where does the CSS code go.. thank you sir! Any / all assistance you provide is greatly appreciated. Andrew

              Comment


              • #8
                THANK YOU FOR YOUR HELP!

                Comment


                • #9
                  elightbox - Awesome tip about adding ?rel=0 - THANK YOU!!

                  got the video code to work, but am confused as to where to put the CSS CODE. Also, is it bad that I put the video code here (see attached screenshot). The reason I did so is because I'd like a video with my particular product. If that's not what you recommend, can you please tell me how to insert this code for each product. Sorry I'm a bit clueless lol. Thanks again and thank you NMTEACO too!


                  Originally posted by elightbox View Post
                  You need some CSS to make the Video responsive. Also to not get related videos add ?rel=0 to the end of the video.
                  Make sure to follow NMTEACO instructions about the WYSIWYG editor.

                  Replace the XXXXX with the Video code
                  Code:
                  <div class="youtube-video-container" style="text-align:center;">
                  <iframe src="//www.youtube.com/embed/XXXXXXXXXXXXX?rel=0" width="640" height="360" frameborder="0" allowfullscreen="">
                  </iframe>
                  </div>
                  CSS:
                  Code:
                  .youtube-video-container {
                  width:80%;
                  max-width:640px;
                  position:relative;
                  padding-bottom:56.25%;
                  padding-top:10px;
                  height:0;
                  overflow:hidden;
                  margin-left: auto;
                  margin-right: auto;
                  }
                  .youtube-video-container iframe, .youtube-video-container object, .youtube-video-container embed {
                  position:absolute;
                  top:0;
                  left:0;
                  width:100%;
                  height:100%;
                  }

                  Comment


                  • #10
                    You can put the Youtube DIV anywhere you want. Having it in the description is fine. Also if your listing page is setup with tabs, you can put it in one of the tabs.

                    The only issue I see with putting the DIV in the description is that if you do send feeds to Google etc.., this will be in the feed.

                    The CSS would go at the end of your stylesheet. Typically that would be default_modified.css
                    To edit, go to:
                    Settings > Design > Themes & Styles Click on the Button that says: "Edit Look.Colors (CSS)" Then Click on the "Advanced Mode" button and paste this snippet at the end.

                    Clear Cache & Refresh your browser

                    Whenever you add new styles to the stylesheet, preface it with an explanation line like this (This is an FYI only and it is a helpful reminder to you in the future):
                    Anything between "/* and */" is for informational purposes only.

                    /* Code for styling Youtube videos added on 9/14/2015 */

                    Hope this helps.
                    Last edited by elightbox; 09-14-2015, 11:26 AM.

                    Comment


                    • #11
                      Thank you SO very much elightbox for this awesome explanation! That helped me so much! I'm assuming after doing this, this makes the videos responsive right?
                      Thank again. I really appreciate it. :)

                      Comment


                      • #12
                        ashults74 Yes, but you should test it. Just make your browser smaller and see if the video size adjusts, or pull the page on a phone or tablet.

                        I would also suggest placing the Video DIV in one of the extra fields and making that field show up below your description. It would be cleaner that way for feeds and crawlers..

                        Comment

                        Working...
                        X