របៀប Embed Responsive iFrame វីដេអូ

ក្នុង​អត្ថបទ​នេះ​ដែរ​ខ្ញុំ​នឹង​បង្ហាញ​អ្នក​ទាំងអស់​គ្នា​ពី​របៀប Embed Video លក្ខណៈ Responsive ដែល​វា​រីករួម​ទៅ​តាម​ប្រភេទ Devices ផ្សេងៗ​ដូចជា៖ Smart Phone, Tablet, Desktop... ជា​ដើម។

១.ចូល​ទៅកាន់ Theme => Edit HTML រួច​ចម្លង​កូដ​ខាងក្រោម​ដាក់​ពី​ខាងលើ </head>

<style type="text/css">
#iframe-player{position:relative;overflow:hidden;width:100%;height:100%;border-radius:5px}
.iframe-container{border:4px solid #ff0000}
.iframe-responsive{position:relative;overflow:hidden;width:100%;height:100%;padding-top:56.25%;background-color:rgb(0,0,0)}
.iframe-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
</style>

២.ចម្លង​កូដ​ខាងក្រោម​ដាក់​ពី​ខាងលើ </body> បន្ទាប់​មក​ចុច Icon Save រួច​ចាកចេញ​ពី​ផ្ទាំង Edit HTML

<script type="text/javascript">
$('#iframe-player').each(function () {
    let $this = $(this),
        zeroIndex = 0,
        buildIframe = "";
    buildIframe += '<div class="iframe-container">';
    buildIframe += '<div class="iframe-responsive">';
    buildIframe += '<iframe id="video-iframe" src="' + embedSource[zeroIndex] + '" width="100%" height="100%" allowfullscreen="true" loading="lazy"></iframe>';
    buildIframe += '</div></div>';
    $this.html(buildIframe);
});
</script>

៣.ចម្លង​កូដ​ខាងក្រោម​ដាក់​ក្នុង Blog Post ដោយ​ប្ដូរ​ទៅជា HTML view

<div id="iframe-player"></div>
<script>
let embedSource = ["https://vdoview.tumblr.com/?id=2648030186054"];
</script>

៤.ផ្លាស់ប្ដូរ Link Video ខាងលើ​រួច​ចុច​ពាក្យ Publish ជា​ការ​ស្រេច៕