Markdown Jekyll: Masukkan iframe yang mengisi wadah

cara memasukkan video ke blog markdown jekyll menjelaskan kepada saya cara memasukkan iframe ke dalam postingan. Namun, saya menggunakan iframe untuk peta selebaran. Berbeda dengan Cara menampilkan peta selebaran di satu postingan di jekyll? Saya menyimpan kode peta di file html lokasi terpisah dan saya menampilkan peta dalam iframe di postingan saya. Saya menghosting ini di github jadi saya tidak bisa menggunakan plugin jekyll.

Saya dapat menampilkan petanya, tetapi saya tidak mengerti bagaimana memastikan iframe mengisi wadah blog dengan cara yang responsif terhadap ukuran jendela browser. Apakah ada cara untuk menentukan ini hanya dalam kode untuk posting blog, atau apakah saya harus membuat gaya css saya sendiri seperti ini postingan blog


jekyll iframe leaflet
person raphael    schedule 27.07.2015    source sumber

Jawaban (2)


arrow_upward
6
arrow_downward

Saya berasumsi Anda melakukan {% include mapName.html %} untuk kode peta Anda, tetapi pertanyaan Anda lebih didasarkan pada wadah dan gaya CSS, Anda mungkin perlu menulis gaya Anda sendiri untuk memastikan iframe responsif, berikut ini contohnya, yang diambil dari dan dijelaskan secara detail di sini (silakan rujuk juga ke situs tersebut untuk contoh lebih lanjut, Anda harus melakukannya karena penjelasannya sangat detail). Berikut adalah contoh singkat prosesnya, seperti yang disebutkan dalam postingan tersebut:

  1. Buat div untuk iframe Anda dengan id.:

    <div class="video-container">
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

  2. Gaya div dalam CSS:

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

  3. Dan terakhir gaya iframe:

    .video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Meskipun demikian, jika kode peta Anda tidak sepenuhnya unik, Anda dapat memilih cara yang lebih mudah dan tidak menangani gaya CSS apa pun dengan layanan seperti embed .ly, yang saya gunakan di blog saya sendiri saat menyematkan video dan iframe karena gambarnya responsif menggunakan Javascript.

person matrixanomaly    schedule 28.07.2015
comment
Setelah sedikit usaha, saya berhasil. Saya telah mengabaikan solusi yang disarankan dalam postingan blog yang saya tautkan dalam pertanyaan saya karena penggunaan <div> dalam postingan penurunan harga saya merusak format penurunan harga lainnya di luar <div>. Ternyata (menurut saya) ini karena tema saya menggunakan redcarpet sebagai parser. Beralih ke kramdown berhasil. Pertanyaan Saya kurang mengikuti kalimat pertama Anda. Saat ini saya menggunakan plugin di QGIS untuk menghasilkan selebaran mandiri yang memetakan foldernya sendiri dan dengan index.html miliknya sendiri. Saya kemudian menggunakan iframe untuk menyematkan peta di dalam sebuah posting. - person raphael; 29.07.2015
comment
@raphael ah begitu. Apa yang saya maksud dengan kalimat pertama adalah Anda dapat 'menyisipkan' cuplikan apa pun yang Anda inginkan menggunakan sintaks `{% include filename.html %}, yang menurut saya mungkin merupakan sesuatu yang mungkin Anda lakukan. Ini digunakan untuk menyertakan bilah header misalnya, berikut dokumennya: jekyllrb.com/docs/templates /#termasuk - person matrixanomaly; 30.07.2015

arrow_upward
0
arrow_downward

Pembantu CSS

.is-fullwidth {
    width: 100%;
}

Dalam penurunan harga

    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" class="is-fullwidth" height="315px"
    </iframe>
person Arash Outadi    schedule 12.12.2019