Hello shotstack team,
Great product !!
I am having an issue with some css properties (paddings, borders). Looks like they are getting ignored.
Margins, Font size, Color, Backgound color works fine.
Any idea what am I missing?
JSON:
{
"output": {
"format": "mp4",
"resolution": "mobile"
},
"timeline": {
"background": "#000000",
"tracks": [
{
"clips": [
{
"start": 1,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>Ράδιο Αρβύλα: Κανονικά στον αέρα η εκπομπή σήμερα</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 0,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/antonis-kanakis-radio-arvila.jpg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 5,
"length": 1
}
]
},
{
"clips": [
{
"start": 6,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>Η Γη της Ελιάς: Πόλεμος ανάμεσα σε Κωνσταντίνο και Δημήτρη</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 5,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/dimitris-konstantinos-gi-tis-elias-1.jpg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 10,
"length": 1
}
]
},
{
"clips": [
{
"start": 11,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>Παρέλαση αστέρων τον Δεκέμβριο στη μικρή οθόνη</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 10,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/cosmote-tv-seires-dekemvrios.jpg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 15,
"length": 1
}
]
},
{
"clips": [
{
"start": 16,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>Πάνος Νάτσης – Σέρρες: Ο ηθοποιός μιλάει για τον ρόλο του στην σειρά</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 15,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/panos-natshs-kentrikh-foto.jpg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 20,
"length": 1
}
]
},
{
"clips": [
{
"start": 21,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>Η Γη της Ελιάς: Η Ιουλία αρνείται να βάλει το μονόπετρο του Κουράκου</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 20,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/ioulia-kourakos-gi-tis-elias-1.jpg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 25,
"length": 1
}
]
},
{
"clips": [
{
"start": 26,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>Έξι νύχτες στην Ακρόπολη: Πρεμιέρα για τη νέα σειρά της ΕΡΤ</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 25,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/exi-nyxtes-sthn-akropoli-premiera.jpg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 30,
"length": 1
}
]
},
{
"clips": [
{
"start": 31,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>Άγριες Μέλισσες: Η Μυρσίνη το παίζει νέο αφεντικό στο εργοστάσιο</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 30,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/agries-melisses-epomena-epeisodia-doukas-mirsini-1.jpg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 35,
"length": 1
}
]
},
{
"clips": [
{
"start": 36,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>ANT1: Χωρίς Ράδιο Αρβύλα σήμερα – Τι θα γίνει τις επόμενες μέρες</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 35,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/radio-arvyla-xoris-shmera-scaled.jpeg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 40,
"length": 1
}
]
},
{
"clips": [
{
"start": 41,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>Σκοτεινή Θάλασσα: Γιατί επιλέχθηκε το Μεσολόγγι για τα γυρίσματα;</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 40,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/skoteini-thalassa-mega-2.jpg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 45,
"length": 1
}
]
},
{
"clips": [
{
"start": 46,
"length": 5,
"position": "center",
"asset": {
"height": 60,
"html": "<div>Survivor: Ανατροπή με την πρεμιέρα – Η νέα ημερομηνία</div>",
"css": "div { background-color: #fff; border-left: 5px solid #0047ff; padding: 50px; text-align: left; color: #000; font-size: 20px; }",
"type": "html",
"background": "#FF0000"
},
"transition": {
"in": "slideUp",
"out": "slideDown"
}
},
{
"start": 45,
"length": 6,
"asset": {
"type": "image",
"src": "https://youfly.com/wp-content/uploads/2021/12/survivor-imerominia-premiera.jpg"
},
"transition": {
"in": "fade"
},
"effect": "zoomInSlow"
},
{
"asset": {
"type": "luma",
"src": "https://cdn.orangeclickmedia.com/videos/transition1_5.mp4"
},
"start": 50,
"length": 0
}
]
}
]
}
}