How to implement iframe embed instead div embed
Submitted by vinicius.silva on Thu, 11/07/2019 - 19:44
Forums:
Hi! i'm trying to implement iframe embed instead div approach to avoid CSS conflict with the CSS of my site. Even following the steps described at https://h5p.org/creating-your-own-h5p-plugin The iframe is not populated with the H5P content event those sytles and scripts are not injected (inspected via network tab)
Can someone point me to right path to implement this?
<!doctype html>
<html class="h5p-iframe">
<head>
<meta charset="utf-8">
<script>
H5PIntegration = {
"contents": {
"cid-svVVmYF9": {
"contentUrl": "/h5p/content/svVVmYF9/content",
"displayOptions": {
"copy": true,
"copyright": true,
"embed": true,
"export": true,
"frame": true,
"icon": true
},
"embedCode": "<iframe src=\"http://localhost:8080/embed/?contentId=svVVmYF9\" width=\":w\" height=\":h\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"></iframe>",
"resizeCode": "<script src=\"http://localhost:8080/h5p/core/js/h5p-resizer.js\" charset=\"UTF-8\"><\/script>",
"fullScreen": false,
"jsonContent": "{\"progressText\":\"Cartão @card de @total\",\"next\":\"Próximo\",\"previous\":\"Anterior\",\"checkAnswerText\":\"Verificar resposta\",\"showSolutionsRequiresInput\":true,\"defaultAnswerText\":\"Sua resposta\",\"correctAnswerText\":\"Correto\",\"incorrectAnswerText\":\"Incorreto\",\"showSolutionText\":\"Resposta correta\",\"results\":\"Resultados\",\"ofCorrect\":\"@score de @total corretos\",\"showResults\":\"Mostrar resultados\",\"answerShortText\":\"R:\",\"retry\":\"Tentar novamente\",\"caseSensitive\":false,\"description\":\"yyyyyyyyyyyyy\",\"cards\":[{\"tip\":\"\",\"text\":\"Quanto é 2+2\",\"answer\":\"4\"},{\"text\":\"Quanto é 3 + 4\",\"answer\":\"7\",\"tip\":\"<p>Sete</p>\\n\"},{\"text\":\"Em que ano o educare foi lançado\",\"answer\":\"2019\",\"tip\":\"<p>Ano corrente</p>\\n\"}]}",
"library": "H5P.Flashcards 1.5",
"scripts": [
"/h5p/libraries/H5P.Transition-1.0/transition.js",
"/h5p/libraries/Tether-1.0/scripts/tether.min.js",
"/h5p/libraries/Drop-1.0/js/drop.min.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-help-dialog.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-message-dialog.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-progress-circle.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-simple-rounded-button.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-speech-bubble.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-throbber.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-tip.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-slider.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-score-bar.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-progressbar.js",
"/h5p/libraries/H5P.JoubelUI-1.3/js/joubel-ui.js",
"/h5p/libraries/H5P.Flashcards-1.5/js/xapi.js",
"/h5p/libraries/H5P.Flashcards-1.5/js/flashcards.js"
],
"styles": [
"/h5p/libraries/FontAwesome-4.5/h5p-font-awesome.min.css",
"/h5p/libraries/Tether-1.0/styles/tether.min.css",
"/h5p/libraries/Drop-1.0/css/drop-theme-arrows-bounce.min.css",
"/h5p/libraries/H5P.FontIcons-1.0/styles/h5p-font-icons.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-help-dialog.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-message-dialog.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-progress-circle.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-simple-rounded-button.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-speech-bubble.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-tip.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-slider.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-score-bar.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-progressbar.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-ui.css",
"/h5p/libraries/H5P.JoubelUI-1.3/css/joubel-icon.css",
"/h5p/libraries/H5P.Flashcards-1.5/css/flashcards.css"
]
}
},
"l10n": {
"H5P": {
"fullscreen": "Fullscreen",
"disableFullscreen": "Disable fullscreen",
"download": "Download",
"copyrights": "Rights of use",
"embed": "Embed",
"size": "Size",
"showAdvanced": "Show advanced",
"hideAdvanced": "Hide advanced",
"advancedHelp": "Include this script on your website if you want dynamic sizing of the embedded content:",
"copyrightInformation": "Rights of use",
"close": "Close",
"title": "Title",
"author": "Author",
"year": "Year",
"source": "Source",
"license": "License",
"thumbnail": "Thumbnail",
"noCopyrights": "No copyright information available for this content.",
"downloadDescription": "Download this content as a H5P file.",
"copyrightsDescription": "View copyright information for this content.",
"embedDescription": "View the embed code for this content.",
"h5pDescription": "Visit H5P.org to check out more cool content.",
"contentChanged": "This content has changed since you last used it.",
"startingOver": "You'll be starting over.",
"by": "by",
"showMore": "Show more",
"showLess": "Show less",
"subLevel": "Sublevel"
}
},
"postUserStatistics": false,
"saveFreq": false,
"url": "/h5p",
"libraryUrl": "http://localhost:8080/h5p/core/js",
"core": {
"styles": [
"/h5p/core/styles/h5p.css",
"/h5p/core/styles/h5p-confirmation-dialog.css",
"/h5p/core/styles/h5p-core-button.css"
],
"scripts": [
"/h5p/core/js/jquery.js",
"/h5p/core/js/h5p.js",
"/h5p/core/js/h5p-event-dispatcher.js",
"/h5p/core/js/h5p-x-api-event.js",
"/h5p/core/js/h5p-x-api.js",
"/h5p/core/js/h5p-content-type.js",
"/h5p/core/js/h5p-confirmation-dialog.js",
"/h5p/core/js/h5p-action-bar.js"
]
}
};
</script>
</head>
<body>
<div class="h5p-iframe-wrapper"><iframe id="h5p-iframe-svVVmYF9" class="h5p-iframe" data-content-id="svVVmYF9" style="height:1px" src="about:blank" frameBorder="0" scrolling="no"></iframe></div>
</body>
</html>