Hi Sparkle people, I am embedding a lot of videos on my site from various sources. Each one comes up in a popup. I was trying to find a way to embed videos not from Vimeo or Youtube, using an embed code from the video source site (NFB.ca). I want to embed, and not link to an outside source, which sends people away from my site. I didn’t see this in the manual, but I was able to do this by choosing instead of add video, to add embed from the Special options, and pasting the embed code there. It works! Here’s the problem: it looks fine on my computer, but on my phone, it is way too big and half the film frame fills the screen, under my text. I did try embedding a smaller version, as I have that option, but it looked the right size on the phone, though very off center, but is too small on the computer. On both devices, it looks fine if choosing full screen in the player. So can I control how this looks, or do I give up and link to an outside site?
Hello 
The issue you’re facing is due to the embed codes you find on these sites. Taking the example of the site you mentioned (NFB.ca), here’s the code it provides for the video on the homepage:
<iframe src="https://www.nfb.ca/film/wintopia/embed/player/" width="560" height="315" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe><p style="width:560px"> ...
In this code, you can see that the width and height are set to 560 and 360 pixels.
These dimensions are fixed values, meaning they will be the same on all devices, whether it’s a smartphone or PC; they don’t adapt to the screen size. To fix this, you need to replace the fixed values with percentage values. By replacing the values (what’s inside the parentheses) with 100%, the video will take 100% of the width/height of the embed in Sparkle. Here’s an example of the modified code:
<iframe src="https://www.nfb.ca/film/wintopia/embed/player/" width="100%" height="100%" frameborder="0" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe><p style="width:100%">...
This way, you only need to adjust the size of your embed on different devices.
However, I must say that it’s better to use the built-in video function in Sparkle. So, when you have the option to upload the video or retrieve its link and embed it directly on your site using the built-in function, it’s better to do so.
I hope this helps.
This works perfectly. Thank you so much for the tip.