Menu icon Foundation
Can't embed video using Foundation 5

As my title says, I can't embed video either from Youtube nor Vimeo, using div.flex-video or not. I even download fresh copy of Foundation 5 and just place the embed command just to test in case I have something wrong in my project, but the result remains same.

It's just blank area but it took the space, inspected with Firebug and the video source is already there.

flex-videoembedVideo

As my title says, I can't embed video either from Youtube nor Vimeo, using div.flex-video or not. I even download fresh copy of Foundation 5 and just place the embed command just to test in case I have something wrong in my project, but the result remains same.

It's just blank area but it took the space, inspected with Firebug and the video source is already there.


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan almost 6 years ago

Hi Alief,

I experienced the same problem. But I solved it.

You need to correct the URL by putting http:// or https:// in front of the URL in src

EDIT

After some reading about this subject. I would like to add to this solution. By missing out http:// or https:// in the src, the video should still be loaded. Only use this solution as a last resort as requesting a secured (https) resource over an unsecured connection (http), could compromise security.

This post has been closed. No new replies can be added.

Alief Putera almost 6 years ago

Thanks Wing! couldn't believe the fix was so simple yet made a headache for me. Works for me now.

Wing-Hou Chan almost 6 years ago

Hi Alief,

I experienced the same problem. But I solved it.

You need to correct the URL by putting http:// or https:// in front of the URL in src

EDIT

After some reading about this subject. I would like to add to this solution. By missing out http:// or https:// in the src, the video should still be loaded. Only use this solution as a last resort as requesting a secured (https) resource over an unsecured connection (http), could compromise security.

Alief Putera almost 6 years ago

Hi Wing,

Using this code found in Foundation 5 documentation page, still not working in my project and even with fresh from download (not adding anything except the flex-video code). FF and Chrome same result. Can you test in your device? using fresh Foundation 5 download and add this piece from documentation

<div class="flex-video"> <iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe> </div>

Wing-Hou Chan almost 6 years ago

Hi Alief,

Could you post the code up or a link to the site so we can take a look?