diff --git a/website/src/article-vew-components/game-article.js b/website/src/article-vew-components/game-article.js index 4e4eb56bff43ab8dd41f8b8fd493aed87a18ee01..ac0e379a80e31f54ed3f0af4faa3a7285d83abf0 100644 --- a/website/src/article-vew-components/game-article.js +++ b/website/src/article-vew-components/game-article.js @@ -30,8 +30,8 @@ class GameArticle { init_details() { this.details = this.data.details.filter(d => { const { label, value } = d; - if (label === "video") { - this.video_link = value; + if (label === "embed") { + this.embed_content = value; return false; } return true; @@ -153,15 +153,10 @@ class GameArticle { tag: "p", contents: this.body }, - this.video_link && { - tag: "iframe", - src: this.video_link, - frameborder: 0, - allowfullscreen: true, - width: 400, - height: 250, - allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", - title, + this.embed_content && { + tag: "div", + class: "embed", + contents: this.embed_content, }, ], }, diff --git a/website/src/article-view.scss b/website/src/article-view.scss index 50ffdf2b18fed9ae2b6527d162964ad1330f4fd3..9c206ce140898c4334380bf9cccfa0396c06ef01 100644 --- a/website/src/article-view.scss +++ b/website/src/article-view.scss @@ -83,10 +83,16 @@ text-align: justify; } - iframe { + .embed { width: 400px; height: 250px; + + iframe { + width: 100%; + height: 100%; + } } + } .image-carousel { @@ -123,7 +129,7 @@ #article-body { grid-template-columns: 1fr; - iframe { + .embed { width: 100%; height: 400px; } @@ -165,7 +171,7 @@ padding: 20px; #article-body { - iframe { + .embed { height: 300px; } } @@ -210,7 +216,7 @@ font-size: initial; } - iframe { + .embed { height: 250px; } }