Inline Frame 設定

Jerry Kitty Hsu
Axure Geek
Published in
3 min readApr 7, 2018

影片或是地圖的嵌入看似簡單,其實中間嵌入碼的設定都會讓大家一頭霧水

“我不是設定好了嗎,怎麼沒有跑出來?”

“樣式跟我想的不大一樣,怎麼設定?”

這邊就我們常常在實作遇到的問題來解釋,其實大部分的問題都出在於

嵌入碼抓錯段落,因為 Axure 的 Inline Frame 已經做好框架了,不要整個複製貼上!

嵌入碼的取得,就我們最常用的GoogleMap以及Youtube來做示範,相信大家都會把Inline Frame放進頁面中這個功能吧!

其實在這個框架裡面就已經包含<iframe></iframe>的語法,所以我們在網址參數裡面是不需要外層的!

Google Map 可以從分享裡面找到語法,我們只需要擷取粗體的字段,地圖就可以完美呈現

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3747121.8181596454!2d120.0843006!3d23.4857501!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a98b83e7eded%3A0xf2c51e22e30c14ab!2zMTAw5Y-w5YyX5biC5Lit5q2j5Y2A576F5pav56aP6Lev5LiJ5q61MzE25be3OeW8hDfomZ8!5e0!3m2!1szh-TW!2stw!4v1523112092041" width=”800" height=”600" frameborder=”0" style=”border:0" allowfullscreen></iframe>

Youtube 語法同樣只要這個段落就可以使用了

<iframe width=”560" height=”315" src=”https://www.youtube.com/embed/c-HVf91oPQw" frameborder=”0" allow=”autoplay; encrypted-media” allowfullscreen></iframe>

小秘訣一 ,GoogleMap的進階玩法可以參考這裡,申請一個免費的 API KEY 可以自己設定樣式以及嵌入的縮放還有中心點

小秘訣二,Youtube 在嵌入碼後面加上 ?autoplay=1 就可以把自動播放加回來

如果喜歡 Axure Geek 的內容,請用 👏 給我們支持與鼓勵,能分享更好!
最多可以 👏 50下哦!

--

--