Add Video - Product Info

[♥Dnj1964]

I want to add video to the product info description.

Using:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="videos/battery-+-fun-factory.mp4"></iframe>
</div>

video folder is in /public_html

Also tried linking to youtube url instead of server:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://youtu.be/sNPly-u7XMY"></iframe>
</div>

Both give a 404 error

 

Please contact the web site owner for further assistance.  Highly unlikely he will be of any useful help.

 

 

[♥Dnj1964]

I would prefer to the save the video to my server and use that way that way if they are ever removed then it doesn't affect my pages.

For some reason uploading and linking locallly doesn't seem to want to work.

 

If I strip the actual URL from the website and add it into an <iframe> it works.

<div class="embed-responsive embed-responsive-16by9">
<iframe width="530" height="298" src="https://www.youtube-nocookie.com/embed/sNPly-u7XMY?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
</a>
</div>

 

[♥JcMagpie]

The code you need is in the tabs add-on it has video tab, if you need it out side the tab just move it.

[♥JcMagpie]

Just tested code works fine,

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://chilleddisplays.co.uk/videos/AlexanderMcQueen_VID1.mp4"></iframe>
</div>

 

[♥Dnj1964]

2 hours ago, JcMagpie said:

Just tested code works fine,

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://chilleddisplays.co.uk/videos/AlexanderMcQueen_VID1.mp4"></iframe>
</div>

 

If I am using outside the tabs I shouldn't need the _VID1...

i'll figure it out.

Thanks

 

 

[♥JcMagpie]

8 hours ago, Dnj1964 said:

If I am using outside the tabs I shouldn't need the _VID1

That's right.

[♥JcMagpie]

13 hours ago, Dnj1964 said:

Both give a 404 error

Ok on testing your site I get the same 404 error when using from my laptop. You must have a config problem with your site as this should not happen.

Take a look at you config file or pm a copy as well as any redirects in your .htaccess file in root and the full path to your shop.

[♥JcMagpie]

Your code works fine with the correct path to the file. However you need to re think the file names you are using.

Safe Characters

The following character sets are generally safe for use in file names:

• Alphanumeric characters: 0-9, a-z, A-Z
• Special characters: !, -, _, ., *, ', (, and )

Characters to Avoid

You should avoid the following characters in a file name:

• Ampersand "&"
• Dollar "$"
• ASCII character ranges 00–1F hex (0–31 decimal) and 7F (127 decimal.)
• 'At' symbol "@"
• Equals "="
• Semicolon ";"
• Colon ":"
• Plus "+"
• Space – Significant sequences of spaces may be lost in some uses (especially multiple spaces)
• Comma ","
• Question mark "?"
• Backslash "\"
• Left curly brace "{"
• Non-printable ASCII characters (128–255 decimal characters)
• Caret "^"
• Right curly brace "}"
• Percent character "%"
• Grave accent / back tick "`"
• Right square bracket "]"
• Quotation marks
• 'Greater Than' symbol ">"
• Left square bracket "["
• Tilde "~"
• 'Less Than' symbol ("<"
• 'Pound' character "#"
• Vertical bar / pipe "|"

 

[♥Dnj1964]

You were right!

Thank you!

Special character was the problem. Getting rid of the "+" did it.

Then putting it in the <iframe> loading from server made the video autoplay.

<div class="embed-responsive embed-responsive-16by9">
<iframe width="530" height="298" src="http://www.naughtypleasures.ca/videos/fun-factory/battery-plus-fun-factory-product-video.mp4"></iframe>
</div>

So changed the code to:

<div class="embed-responsive embed-responsive-16by9 hoverable">
<video class="embed-responsive-item" controls>
<source src="http://www.naughtypleasures.ca/videos/fun-factory/battery-plus-fun-factory-product-video.mp4" type="video/mp4">
</video>
</div>

And it adds play controls and by using "hover" the controls disappear while playing unless mouse over video.