Embedding "Help Videos" Using HTML

leftquark

SmugMug,
Thanks for putting together the Help Video on "How to Buy Prints" -- it looks great and should be super useful.

I wanted to embed the YouTube video onto my site but I have a custom "Prints" page created using HTML/CSS and using the YouTube content block won't work. Essentially I've created HTML/CSS that makes tabs the user can click ... one of the tabs is "Help". I wanted to embed the YouTube video you created on this tab but I need to do it using HTML.

YouTube provides HTML code to embed their videos onto a page ... the new method using IFRAME and the old method using OBJECT code. Both are disallowed in an HTML block.

Is there any way to use HTML to embed a YouTube video? Is the only solution to provide a link that the user has to click, to open the YouTube video in a new window?

For reference, here's my page: http://www.aaronmphotography.com/Pages/Prints

Allen

You will have to add multiple boxes with the YouTube content box between or side by side. The "rat site" lady has done this.
One of her pages
http://www.joinrats.com/Enrichment/TheAimofEnrichment/

leftquark

Allen wrote: »

You will have to add multiple boxes with the YouTube content box between or side by side. The "rat site" lady has done this.
One of her pages
http://www.joinrats.com/Enrichment/TheAimofEnrichment/

Allen, thanks for pointing me to Chancy's site. Unfortunately this won't work, because as I've mentioned, my page is generated using some fancy HTML/CSS and not via a normal content block. The tabs are created by showing or hiding certain bits of the HTML (using the CSS).

Question still stands: is there any way to use HTML to embed a YouTube link? I assume the answer is no, and that's why SM made the YouTube content block instead (since it uses OBJECT or IFRAMES which are banned HTML code).

Flounder

Hi

The embedding from YouTube requires iFrame code, which we do not accept. Your best bet would be using the YouTube content blocks that we provide you with in our customization.

Please let us know if there is anything else we can help you with.

Cheers,
Nick
SmugMug Support Hero

leftquark

Flounder wrote: »

The embedding from YouTube requires iFrame code, which we do not accept. Your best bet would be using the YouTube content blocks that we provide you with in our customization.

Okie, thanks. Since I can't use a YouTube content block within an HTML content block, I'll just stick with a link to the YouTube video.

I guess I could use CSS to move the YouTube Content block up, and CSS to move the rest of my text down. That might be a work-around.

Flounder

Hi

Maybe I don't understand why you cannot use a content block. CSS and HTML are both added using content blocks. Looking at your site you have several content blocks added to it, ranging from CSS to a logo block and a social icon block. Can you elaborate on why you're unable to use a YouTube content block?

Standing by,
Nick

leftquark

Flounder wrote: »

Maybe I don't understand why you cannot use a content block. Can you elaborate on why you're unable to use a YouTube content block?

Nick, my apologies, sometimes I forget that I know my own site much better than anyone else If you pull up my Prints page you'll see that it has several "tabs" along the top. These tabs are created using some fancy HTML and CSS. Here's how it works:

The tabs are created using radio buttons that are customized to look like tabs instead of radio buttons. When a user clicks on the tab, the specific radio button is "checked". In the HTML there are different DIV's for each block of text. You'd see the content for each tab one after each other, serially, if there wasn't any fancy CSS. To control which block of text is shown, first all the blocks of text get hidden, then the radio button that is "checked" tells the CSS to turn on the specific text block.

I want to embed the YouTube video in the "Ordering Help" tab. When the user is on the other tabs, I don't want the YouTube video displayed, but when they click on Help, I do want it to be displayed, mixed in within the text.

If I add a YouTube content block to the bottom, below the HTML/CSS block, I'll get the video displayed on the bottom of the page at all times. Obviously not what I want. Additionally, it would display below the "Ordering Help" text and not mixed within it like I want.

I think there may be a solution. I could add a YouTube content block to the bottom of the page, and similar to the CSS code that hides the other text, only show the YouTube block when the user clicks on "Ordering Help." I could then use CSS to move the YouTube video up, and use some CSS to move my text down. I'll have to play with it when I have some free time.

Thanks for trying to help!

bobbyhero

Not sure if that would work - since it would require you to wrap the Youtube content block in a custom div to show/hide it depending on which 'tab' is displayed. I'd poke around your code, but I'm honestly too afraid I'd break it. Goodluck, and let us know if you come up with a good workaround.

leftquark

bobbyhero wrote: »

Not sure if that would work - since it would require you to wrap the Youtube content block in a custom div to show/hide it depending on which 'tab' is displayed. I'd poke around your code, but I'm honestly too afraid I'd break it. Goodluck, and let us know if you come up with a good workaround.

Yup -- not possible without javascript. The code to hide elements requires the div's to be adjacent or children ... but the YouTube content block DIV won't be a child or adjacent to the HTML code. Oh well. Thanks for trying Nick! Much appreciated!